demo：在一個(gè)頁面中打開兩個(gè)視圖，【抽屜導(dǎo)航欄】和【列表詳情頁】

通過給路由命名，可以指定路由跳轉(zhuǎn)，打開多個(gè)視圖

# index.vue
<template>
<div @click="openDrawer">菜單</div> <!--打開抽屜導(dǎo)航欄-->
<ul>
  <li v-for="item in items" @click="openListDetail(item)"></li> <!--打開列表項(xiàng)詳情頁-->
</ul>

<router-view></router-view>
</template>

# index.vue

methods: {
  openDrawer() {
    this.$router.push({ //編程式導(dǎo)航給路由傳參
      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', // 動(dòng)態(tài)路由匹配
          name: 'listDetail', // 命名路由
          component: ListDetail
        },
        {
          path: ':id',
          name: 'drawer',
          component: Drawer
        }
      ]
    }
]

也可通過to聲明式給路由傳參

<router-link :to="{ name: 'drawer', params: { id: drawer}}">菜單</router-link>

相當(dāng)于把路由導(dǎo)航到 /drawer路徑，這個(gè)drawer是id的值。