vue命名路由

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的值。