demo：在一个页面中打开两个视图，【抽屉导航栏】和【列表详情页】
通过给路由命名，可以指定路由跳转，打开多个视图
# index.vue
<template>
<div @click="openDrawer">菜单</div> <!--打开抽屉导航栏-->
<ul>
<li v-for="item in items" @click="openListDetail(item)"></li> <!--打开列表项详情页-->
</ul>
<router-view></router-view>
</template>
# index.vue
methods: {
openDrawer() {
this.$router.push({ //编程式导航给路由传参
name: 'drawer',
params: {
id: 'drawer'
}
})
},
openListDetail(item) {
this.$router.push({
name: 'listDetail',
params: {
id: `${item.urlid}`
}
})
}
｝
# router/index.js
import List from 'components/list/list'
import ListDetail from 'components/list-detail/list-detail'
import Drawer from 'components/drawer/drawer'
routes: [
{
path: '/list',
component: List,
children: [
{
path: ':id', // 动态路由匹配
name: 'listDetail', // 命名路由
component: ListDetail
},
{
path: ':id',
name: 'drawer',
component: Drawer
}
]
}
]
也可通过to声明式给路由传参
<router-link :to="{ name: 'drawer', params: { id: drawer}}">菜单</router-link>
相当于把路由导航到 /drawer路径，这个drawer是id的值。
