嵌套路由,即路由中嵌套路由。
下面的例子,举例商品列表页面中,通过一个路由查看商品的标题,再通过一个路由查看商品的图片。
我们先定义两个组件,Title.vue , Image.vue。
下面是Title.vue
<template>
<div>
商品名称
</div>
</template>
<script>
export default {
name: 'Title'
}
</script>
<style scoped>
</style>
Image.vue 就不列出了。
然后,我们修改router/index.js , 给商品列表路由定义子路由。如下。
import Vue from 'vue'
import Router from 'vue-router'
import GoodList from '@/views/GoodList'
import Title from '@/views/Title'
import Image from '@/views/Image'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [{
path: '/goods',
name: 'GoodList',
component: GoodList,
children: [
{
path: 'title',
name: 'Title',
component: Title
}, {
path: 'image',
name: 'Image',
component: Image
}
]
}]
})
然后,再去GoodList.vue 中修改。如下。
<template>
<div>
这是商品列表页
<span>{{$route.params.goodsId}}</span>
<br />
<span>{{$route.params.name}}</span>
<router-link to="/goods/title">显示商品标题</router-link>
<router-link to="/goods/image">显示商品图片</router-link>
<div>
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
name: 'GoodList'
}
</script>
<style scoped>
</style>
Done!