关于vue.js:后端小伙伴来学前端了VueRouter-路由各种跳转传参小知识

51次阅读

共计 7047 个字符，预计需要花费 18 分钟才能阅读完成。

前言

学完 Vuex 方面的操作就该来学学 Vue 中的路由操作了 …. xdm 冲

一、装置

vue-cli 装置

vue add router

做完这一步根底环境都搭好了。

我的项目中会多一个

文件夹，内容如下：

最初裸露进去，在 mian.js 中援用进去就能够了。临时先不细讲。

二、根本路由应用

根本路由应用，其实你装置完就曾经有例子啦。

在 App 组件中 有上面这两行代码，其实就路由跳转的意思。

<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |

咱们以前是用 a 标签，这里只是帮咱们封装了。这里配置好的 / 及/about都是router 文件夹下配置好的路由规定，每个门路和哪个组件绝对应。

成果如下：

点击就能跳转.

这是最根底的, 看看就完事了, 因为咱们应用这种形式挺少的, 基本上在路由跳转的过程中都是要做很多事件的.

然而大家发现了没有，只有内容变了，为啥呢？

因为 app 组件中 <router-view/> 这个代码，意思就是切换路由时，将组件内容放到这里展现。

这最根本的，大家轻易玩玩都会的，咱们不多说。

问个小问题，这个路由跳转的过程中，原来的哪个组件是被暗藏了，还是销毁了呢？？？

三、嵌套路由(套娃)

效果图：

就是在 home 和 about 下别离来个路由，也非常容易。

咱们先加两个组件

咱们再 router 中进行配置一下。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    children: [
      {
        path: '/news',
        name: 'news',
        component: () => import(/* webpackChunkName: "about" */ '../components/News.vue'),
      },
    ]
  }
]

其实也就牵扯到 children 这一个属性，就是和下级路由造成父子关系啦。套娃两层是这么套，那么套再多就是在外面接着写就完事了。

一次套娃一次爽，始终套娃一爽快

四、路由传参

成果

咱们再加一个两个子路由，在外面实现路由传参。另外把原来的组件改一下。

4.1、搭建根底环境

MessageItem 组件

<template>
  <div>
    <p> 音讯编号：???<//p>
    <p> 音讯题目：???<//p>
  </div>
</template>

NewsItem 组件

<template>
  <div>
    <p> 新闻编号：???</p>
    <p> 新闻标题：???</p>
  </div>
</template>
<script>

这里的??？是稍后用来接管路由传参的哈。

News 组件

<template>
  <div>
    <ul>
      <li v-for="newItem in news" :key="newItem.id">
        <router-link to="/item">{{newItem.id}}:{{newItem.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {data(){
    return {
      news:[{id:1, title:"001 新闻"},
        {id:2, title:"002 新闻"},
        {id:3, title:"003 新闻"}
      ]
    }
  }
}
</script>

Message 组件

<template>
  <div>
      <ul>
      <li v-for="message in messages" :key="message.id">
        <router-link to="/item">{{message.id}}:{{message.title}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {data(){
    return {
      messages:[{id:1, title:"001 信息"},
        {id:2, title:"002 信息"},
        {id:3, title:"003 信息"}
      ]
    }
  }
}
</script>

4.2、query 参数

第一种：to 的字符串写法

URL 传参，组件用$route.query 取值

Message 组件

<li v-for="message in messages" :key="message.id">
    <router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link>
</li>

留神 这里的 to后面是加了引号的，并且两头的 内容也是用 `符号润饰的

MessageItem 组件

<div>
    <p> 音讯编号：{{$route.query.id}}</p>
    <p> 音讯题目：{{$route.query.title}}</p>
</div>

第二种：to 的对象办法

      <li v-for="message in messages" :key="message.id">
        <!-- to 的字符串写法 -->
        <!-- <router-link :to="`/item?id=${message.id}&title=${message.title}`">{{message.id}}:{{message.title}}</router-link> -->

        <!-- to 的对象写法 -->
        <router-link :to="{
          path: '/item',
          query: {
            id: message.id,
            title: message.title
          }
        }">{{message.id}}:{{message.title}}</router-link>
      </li>

另外一边接管的形式还是同上。

4.3、params 参数

第一种：to 的字符串写法

跳转链接还是差不多的，然而必须在路由规定中进行配置

<router-link :to="`/item/${message.id}/${message.title}`">{{message.id}}:{{message.title}}</router-link>
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
        children: [
          {
            path: '/item/:id/:title', // 应用占位符申明接管 params 参数
            name: 'messageItem',
            component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue')
          }
        ]
      }
    ]
  },

接管的也稍稍有变动：

<p> 音讯编号：{{$route.params.id}}</p>
<p> 音讯题目：{{$route.params.title}}</p>

第二种：to 的对象写法

<!-- to 的对象写法 -->
<router-link 
   :to="{
         name: 'messageItem',
         params:{
                 id:message.id,
                 title: message.title
                }
          }">
    {{message.id}}:{{message.title}}</router-link>

留神：这里必须用 name，即配置好的路由名称，不可能应用路由门路。

4.4、路由的 props 配置（偷懒的好工具）

咱们思考一个问题哈。

你有没有感觉 {{$route.params.id}} 或者{{$route.params.title}} 这样子去取一个路由传过来的值，非常反复呢？？？

取每个值，都还要写一遍 $route.params 或者是$this.query 这个前缀，有没有感觉非常反复，那么有没有更简略的呢？

（一个两个还是简略的，万一有天传的多了，这个 props 必定是能偷懒的哈🐥）

1）props 配置形式一：

{
    path: '/',
        name: 'Home',
            component: Home,
                children: [
                    {
                        path: '/message',
                        name: 'message',
                        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
                        children: [
                            {
                                path: '/item/:id/:title',
                                name: 'messageItem',
                                component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),
      // 第一种形式：props 值为布尔值，布尔值为 true，则把路由收到的所有 params 参数通过 props 传给 MessageItem 组件
                                props:true
                            }
                        ]
                    }
                ]
},

传递 params 参数的父组件啥都不必改，

咱们改一下接管的子组件

<template>
<div>
    <!-- <p> 音讯编号：{{$route.query.id}}</p>
<p> 音讯题目：{{$route.query.title}}</p> -->
    <!-- <p> 音讯编号：{{$route.params.id}}</p>
<p> 音讯题目：{{$route.params.title}}</p> -->
    <!-- 通过 props 接管 -->
    <p> 音讯编号：{{id}}</p>
    <p> 音讯题目：{{title}}</p>
    </div>
</template>
<script>
    export default {props:['id','title']
    }
</script>

2）props 配置形式二：

思考一下，下面的那个办法只能解决传递 params 参数时进行缩写，那么如果是传递 query 参数形式该怎么办呢？

props 配置其实能够改成一个函数的哈

留神：记得在练习的时候，

{
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/message',
        name: 'message',
        component: () => import(/* webpackChunkName: "about" */ '../components/Message.vue'),
        children: [
          {
            path: '/item',
            name: 'messageItem',
            component: () => import(/* webpackChunkName: "about" */ '../components/MessageItem.vue'),
            // props:true
            // 第二种写法：props 值为函数，该函数返回的对象中每一组 key-value 都会通过 props 传给 MessageItem 组件
            props($route) {
              return {
                id: $route.query.id,
                title: $route.query.title
              }
            }
          }
        ]
      }
    ]
  },

想接管什么，咱们就是在这边写啥就完事了，到了子组件，就是间接用了。

解构写法

props({query}) {
    return {
        id: query.id,
        title: query.title
    }
}

更偷懒的就是间断解构：

props({query:{id,title}}) {return {id,title}
}

果然是偷懒使人提高啊。

五、编程式路由

5.1、编程式实现路由跳转

之前咱们都是借助 <router-link to="/news"> 新闻 </router-link> 这个来实现路由的跳转，但理论开发中都是通过点击按钮或者是触发什么事件，而后才进行跳转的，所以应用 router-link 并不是特地适合。才有了编程式路由。

      <li v-for="message in messages" :key="message.id">
        <router-link
          :to="{
            path: '/item',
            query: {
              id: message.id,
              title: message.title,
            },
          }"
        >
          {{message.id}}:{{message.title}}</router-link
        >
        |
        <button type="button" @click="showMessageItem(message.id, message.title,)">
          点击跳转到 {{message.title}} 页面
        </button>
      </li>

利用办法进行跳转

methods: {showMessageItem(id,title){
        this.$router.push(
            {
                path: '/item',
                query: {
                    id: id,
                    title:title
                }
            })
    }
}

如果是 params 也是和之前一样的；

showPamarsMessageItem(id,title){
    this.$router.push(
        {
            name: 'messageItem',
            params: {
                id: id,
                title:title
            }
        })
}

相干的信息也要改哈，路由中配置的 props 啥的。

5.2、编程式管制后退后退

对于浏览器中的后退后退按钮，咱们大家必定是不生疏哈。

其实这个也是能够用编程式的形式来实现的。

<template>
  <div id="app">
    <button id="back" @click="back"> 后退 </button> | 
    <button id="forward" @click="forward"> 后退 </button> |
    <button id="forward" @click="go">go</button>

    <div id="nav" >
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  methods: {back(){console.log(this.$router)
      this.$router.back()},
    forward(){this.$router.forward()
    },
    go(){// 间接说这个 go () 的参数是一个数字，负数就是后退多少步，// 正数就是回退多少步。this.$router.go(2)
    }
  }
}
</script>

其实都是通过 $router 上的 api 来实现的，然而如果是无痕状态下，还是无奈实现的，因为这些实现还是须要依附浏览器的历史记录的。

效果图：

六、缓存路由组件

作用：让不展现的路由组件放弃挂载，不被销毁。

咱们在 MessageItem 组件中写上一个 beforeDestroy 销毁之前的钩子函数

<template>
  <div>
    <p> 音讯编号：{{id}}</p>
    <p> 音讯题目：{{title}}</p>
  </div>
</template>
<script>
export default {
  name: 'MessageItem',
  props:['id','title'],
  beforeDestroy(){console.log('MessageItem 组件被销毁了')
  }
}
</script>

当咱们从 MessageItem 组件切换到其余页面时，就会打印出这个。

然而如果咱们在应用他的父组件身上改成上面这样的。

<keep-alive include="MessageItem"> 
    <router-view></router-view>
</keep-alive>

留神 :include 中写的是组件名。组件名。组件名。

如果不写 include，是默认全副都缓存，不销毁。

这样写就会保障 MessageItem 在切换的过程中不会被销毁。

如果切换的异样频繁的话，我感觉加上这个还是能够的。

七、两个新的生命周期钩子函数

在第六大节，咱们能够把组件进行缓存，然而同时也会造车组件的 beforeDestroy 生命周期钩子函数生效。

那么有些革除操作将会没法执行（如切换路由，让定时器暂停），所以就有了两个路由的独有的生命周期钩子函数。

  1. activated路由组件被激活时触发。
  2. deactivated路由组件失活时触发。
activated(){console.log('MessageItem 被激活了')
},
    deactivated(){console.log('MessageItem 失活了')
    }

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感激。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主 宁在春：主页

一名喜爱文艺却踏上编程这条路线的小青年。

谢谢你，可能看到这里。

正文完
vue.js
发表至： vue.js
2021-11-28
 0
关于vue.js:实现从0搭建基于Vite的Vue项目
关于vue.js:聊聊Vuex原理
关于vue.js:vue-同一页面多次引用封装好的echarts组件
关于vue.js:vuecli30配置多页history路由模式