Vue-router嵌套路由(子路由)

总共添加两个子路由，分别命名Collection.vue（我的收藏）和Trace.vue（我的足迹）

重构router/index.js的路由配置

需要使用children数组来定义子路由
具体如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/Home'
import Brand from '@/Brand'
import Member from '@/Member'
import Cart from '@/Cart'
import Me from '@/Me'
 
import Collection from '@/Collection'
import Trace from '@/Trace'
import Default from '@/Default'
 
Vue.use(Router)
 
export default new Router({
  // mode: 'history',
  // base: __dirname,
  // linkActiveClass: 'active', // 更改激活状态的Class值
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/brand',
      name: 'Brand',
      component: Brand
    },
    {
      path: '/member',
      name: 'Member',
      component: Member
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart
    },
    {
      path: '/me',
      name: 'Me',
      component: Me,
      children: [
        {
          path: 'collection',//以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
          name: 'Collection',
          component: Collection
        },
        {
          path: 'trace',
          name: 'Trace',
          component: Trace
        }
      ]
    }
  ]
})

Me.vue的代码如下：

页面效果

当访问到http://localhost:8080/#/me时，组件Me中并没有渲染出任何东西，这是因为没有匹配到合适的子路由。如果需要渲染一些默认内容，需要在children中添加一个空的子路由：

{
      path: '',
      name: 'Default',
      component: Default
},

转载于：https://blog.csdn.net/wlangmood/article/details/78269947