嵌套路由使用场景:
左侧为菜单,右侧为内容,当点击菜单时,切换内容组件而整个页面却不刷新.
嵌套路由的知识点大致和动态路由一样,不同点如下:
eg: good组件中嵌套title组件和content组件
router/index.js中的配置。
import goods from './../views/goods.vue';
import title from './../components/title.vue';
import content from './../components/content.vue';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/user/:id',
name: 'goods',
component: goods,
children:[ //通过children属性添加嵌套路由
{
path: 'title',
name: 'shuiyi', //name随意写
component: title,
},
{
path: 'content',
name: 'chaosuiyi',
component: content,
}
]
},
]
})
goods.vue中的配置:
template>
<div>
<h1>我是商品详情页</h1>
<router-link :to="{name:'shuiyi'}">调到标题页</router-link> //路由切换的一种方式,name要相对应。
<router-view></router-view> //挂载嵌套路由
<router-link to="/user/123/title">调到标题组件</router-link> // 路由跳转的另一种方式,注意这里路径一定要加上goods组件相对应的路径,不然就不是嵌套路由了。
<router-link to="/user/123/content">调到内容组件</router-link>
</div>
</template>
<script>
export default {
}
</script>