前端之vue嵌套路由、命名路由、传参、replace属性

二级路由

1.对页面进行划分, 配置一级路由的子路由(二级路由)
子路由前方不加 /
使用子路由时 router-link 的to 属性要带上父路由/父/子

总结

query参数

三级路由和组件路由传参

1.将router-link的to属性前加上冒号
2.字符串写法

<ul>
  <li v-for="message in messageList" :key="message.id">
    <router-link
      active-class="active"
      :to="`/home/message/detail?id=${message.id}&title=${message.title}`"
    >
      {{ message.title }}
    </router-link>
  </li>
</ul>

3.对象写法 √ 传参路由, 推荐用对象写法

<ul>
  <li v-for="message in messageList" :key="message.id">
    <router-link
      active-class="active"
      :to="{
        path: '/home/message/detail',
        query: {
          id: message.id,
          title: message.title,
        },
      }"
    >
      {{ message.title }}
    </router-link>
  </li>
</ul>

总结

命名路由

1.在路由配置里给对应的路由添加一个字符串类型的属性name
2.使用命名路由时, 将router-link的to属性写成:to
3.使用

//三级路由
export default new VueRouter({
  routes: [
    {
      path: '/about',
      component: MyAbout
    }, {
      path: '/home',
      component: MyHome,
      children: [
        {
          path: 'new',
          component: MyNews
        }, {
          path: 'message',
          component: MyMessage,
          children: [
            {
            //三级路由--------------------------------------------------
              name: 'myDetail',
              path: 'detail',
              component: MyDetail
            }
          ]
        },
      ]
    }
  ]
});

• 只能用对象写法(字符写法默认是路径)
  将path改写为name

<router-link
          active-class="active"
          :to="{
            name: 'myDetail',
            query: {
              id: message.id,
              title: message.title,
            },
          }"
        >

总结

params参数(只能使用name)

1.配置路由的name,
2. 在router路径中配置占位符(/:+name),要一一对应
3.router-link内的:to若采用对象写法, 只能用name指定路径, 不能用path
对象写法

      <li v-for="message in messageList" :key="message.id">
        <-- 1.命名路由  2.params参数 -->
        <router-link
          active-class="active"
          :to="{  
            name: 'myDetail',
            params: {
              id: message.id,
              title: message.title,
            },
          }"
        >
          {{ message.title }}
        </router-link>

字符串写法

      <li v-for="message in messageList" :key="message.id">
        <router-link
          active-class="active"
          :to="`/home/message/detail/${message.id}/${message.title}`"
        >
        <!-- 传参位置要和路由path对应 -->
          {{ message.title }}
        </router-link>
      </li>

获取传递的参数

{{ $route.params.路由对应占位名 }}

总结:

路由的props

链接: 组件的props
在路由内添加props属性, 给对应的路由页面添加prop

写法

在路由器中对应路由页面的配置

第一种: 对象写法
props的value是对象
对应死数据

router对应路由

props:{key:value,……}

第二种: 布尔写法
将传递的params参数以props的形式传递个对应路由页面

router内的对应组件

props:true,

params传参

        <router-link
          active-class="active"
          :to="`/home/message/detail/${message.id}/${message.title}`"
        >

接收组件

  props: ["id", "title"],

第三种: 函数写法 √√√
返回值必须是对象
参数是$route, 可以用结构体的完全拷贝

在组件中用props接收
1.参数 $route

 props($route) {
   return {id: $route.params.id, title: $route.params.title}
 }

2.参数 {query,params} 推荐(语义化明确)

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

3.参数 {query:{id,title}}

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

总结

router-link的replace属性

下一节:前端之vue编程式路由导航、缓存路由组件