vue学习之------vue-router【路由嵌套】

1、声明子路由链接和子路由占位符

?

1 2 3 4 5 6 7 8 9 10

<template>   <h2>>>about组件</h2>   <!-- 子路由链接 -->   <router-link to="/about/tab1">选项一</router-link>    <router-link to="/about/tab2">选项二</router-link>   <hr />     <!-- 子路由占位符 -->   <router-view></router-view> </template>

2、在父路由规则中，通过children属性嵌套声明子路由规则

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{       path: "/about",       component: About,       children: [         //嵌套子路由规则         {           path: "tab1",           component: MyTabOne,         },         {           path: "tab2",           component: MyTabTwo,         },       ],     },

3、子路由中的路由重定向

 

效果：