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

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

<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属性嵌套声明子路由规则

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

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

 

效果：