快捷搜索:

vue-router动态路由详解

平时做项目时遇到的点击列表页,显示详情页面,此时就需要我们传递列表唯一的标识,然后显示对应的内容。

通常做法是以“参数=值”的形式传递参数,而动态路由将参数融入到路由的路径定义之内成为路径的一部分。

在参数名称之前加“:”,然后将参数写在路由的path内。

下面是给详情页detail传递唯一标识id,从而调取详细的内容。

routes: [
    {
      path: /,
      name: Home,
      component: Home,
      children: [
        {
          path: /detail/:id,
          name: Detail,
          component: Detail
        },
      ]
    }]

在<router-link>中只需要在to属性中加入params属性来指定具体的参数值:

<router-link tag="div" class="book" v-for="book in books" :to="{name:Detail,params: {id: book.id}}" :key="book.id">
   <div class="cover">
      <img :src="book.img_url"/>
   </div>
   <div class="title">{
         
  {book.title}}</div>
   <div class="authors">{
         
  {book.authors | join}}</div>
</router-link>
如果要同时传递多个参数,只需要在params中对应声明参数值即可。

那么问题来了?在组件Detail中怎么获取这个唯一标识id呢?可以通过$route.params属性来获取需要的参数值。

具体Detail.vue

<template>
  <div class="detail">
    <p @click="back">返回</p>
    <p>{
          
   {$route.name}}</p>
    <p>{
          
   {$route.params.id}}</p>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    watch: {
      $route (to, from) {
        // 对路由变化作出响应...
        console.log(to);
        console.log(from);
      }
    },
    created () {
      console.log(this.$route.params.id);
    }
  }
</script>
<style lang="less" rel="stylesheet/less" type="text/less">

</style>
从detail/1导航到detail/2,原来的组件实例会被复用。因为两个路由都渲染同一组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用,即页面第二次加载时钩子函数将失效。那么,当复用组件时,想对路由参数做出响应的话,需要在watch对象内添加对$route对象变化的跟踪函数:
watch: {
   $route (to, from) {
      // 对路由变化作出响应...
      console.log(to);
      console.log(from);
   }
}
例如detail/1导航到detail/2时,to与from的值:

detail/1浏览器显示:

detail/2浏览器显示:

即from detail/1 to detail/2

同时vue-router使用path to regexp作为路由路径引擎,给参数添加匹配模式。

下面是一个只传递数字的正则,正则需要放在括号中。

{
    path: /detail/:id(\d+),
    name: Detail,
    component: Detail
}
vue-router除了使用$route.params获取参数值,还可以使用$route.query(路径渲染为detail?id=1,需要删除路由配置中路径的参数,同时更改<router-link>中的params为query)和$route.meta(常量参数,直接在路由配置中定义meta的值)获取。

经验分享 程序员 微信小程序 职场和发展