vue-router路由巢狀
巢狀路由顧名思義就是路由的多層巢狀。
結合vue-router仿天貓底部導航欄,給元件Me新增巢狀路由,也叫子路由。
總共新增兩個子路由,分別命名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',
name: 'Collection',
component: Collection
},
{
path: 'trace',
name: 'Trace',
component: Trace
}
]
}
]
})
以“/”開頭的巢狀路徑會被當作根路徑,所以子路由上不用加“/”;
在生成路由時,主路由上的path會被自動新增到子路由之前,所以子路由上的path不用在重新宣告主路由上的path了。
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>
</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>
頁面效果:
當訪問到http://localhost:8080/#/me時,元件Me中<router-view>並沒有渲染出任何東西,這是因為沒有匹配到合適的子路由。如果需要渲染一些預設內容,需要在children中新增一個空的子路由:
{
path: '',
name: 'Default',
component: Default
},
此時瀏覽器的效果:預設元件Default被渲染出來了