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>