其他分享
首页 > 其他分享> > vue学习之------vue-router【路由嵌套】

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、子路由中的路由重定向

 

效果:

 

标签:about,vue,component,嵌套,path,------,router,children,路由
来源: https://www.cnblogs.com/zhaoyingzhen/p/16597068.html