vue嵌套路由配置

多级路由

使用：

1、创建页面：创建需要的页面

2、配置子页面路由：给当前路由添加children属性，以数组形式进行子页面路由配置。

注意：子路由中的路径不能写/。

3、应用路由：将子路由显示在当前页面上

<router-view/>

4、添加子页面跳转

  <router-link to="/about/us">关于我们</router-link> |<router-link to="/about/info">关于信息</router-link>

5、给父级页面添加重定向属性，表示进入该页面默认展示哪个子页面

redirect: "/about/us"

路由配置代码：

const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),redirect: "/about/us",children: [{path: 'us',name: 'us',component: () => import('../views/AboutSubView/AboutUs.vue'),},{path: 'info',name: 'info',component: () => import('../views/AboutSubView/AboutInfo.vue'),}]}
]

页面代码：

<template><div class="about"><h1>This is an about page</h1></div><router-link to="/about/us">关于我们</router-link> |<router-link to="/about/info">关于信息</router-link><router-view/>
</template>