[Vue]vue-router嵌套路由(子路由)

總共添加兩個子路由，分別命名Collection.vue（我的收藏）和Trace.vue（我的足跡）

1、重構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
        }
      ]
    }
  ]
})

 

2、Me.vue的代碼如下：

 

<template>
  <div class="me">
    <div class="tabs">
      <ul>
        <!--<router-link :to="{name: 'Default'}" tag="li" exact>默認內容</router-link>-->
        <router-link :to="{name: 'Collection'}" tag="li" >我的收藏</router-link>
        <router-link :to="{name: 'Trace'}" tag="li">我的足跡</router-link>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>//<router-link> 就是定義頁面中點擊的部分，<router-view> 定義顯示部分，就是點擊后，區配的內容顯示在什么地方，會被匹配到的組件替換掉
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
 
</script>
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
  .me{
    .tabs{
      & > ul, & > ul > li {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      & > ul{
        display: flex;
        border-bottom: #cccccc solid 1px;
        & > li{
          flex: 1;
          text-align: center;
          padding: 10px;
          &.router-link-active {
            color: #D0021B;
          }
        }
      }
    }
  }
</style>

 

3.頁面效果：

 

當訪問到http://localhost:8080/#/me時，組件Me中<router-view>並沒有渲染出任何東西，這是因為沒有匹配到合適的子路由。如果需要渲染一些默認內容，需要在children中添加一個空的子路由：

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

此時瀏覽器的效果：默認組件Default被渲染出來了：

 

轉自：https://blog.csdn.net/wlangmood/article/details/78269947