嵌套路由顾名思义就是路由的多层嵌套。
结合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的代码如下:
我的收藏
我的足迹
页面效果:
当访问到http://localhost:8080/#/me时,组件Me中
{
path: '',
name: 'Default',
component: Default
},
此时浏览器的效果:默认组件Default被渲染出来了
可以看出不同组件之间用到了相同的class类名,并且设置样式时之间会互相影响,所有我们需要在组件内的style标签上添加scoped属性
本文参考 技术胖博客 vue-router官网