5、命名路由、命名视图

介绍

学习vue-router的一些学习笔记，所有笔记内容请看 vue-router学习笔记

命名路由

通过名称来标志一个路由，可以更加方便的使用。可以在创建Router实例的时候，在routes配置中给某个路由设置名称

const router = new VueRouter({
    routes: [
        {
            path：'/user/:userId',
            name: 'user',// 命名路由
            component: User
        }
    ]
})

连接一个命名路由，可以给 router-link 的to属性传递一个对象：

<router-link :to="{name :'user',params:{ userId: 123}}">User<router-link>

使用router.push():

router.push({name:'user',params:{ userId:123}})

上述两种方式都会导航到 /user/123
例子：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/foo', name: 'foo', component: Foo },
    { path: '/bar/:id', name: 'bar', component: Bar }
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Named Routes</h1>
      <p>Current route name: {{ $route.name }}</p>
      <ul>
        <li><router-link :to="{ name: 'home' }">home</router-link></li>
        <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
        <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

命名视图

有时想同时(同级)展示多个视图，而不是嵌套展示，命名视图就派上用场。

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components配置 (带上 s)：

const router = new VueRouter({
    routes:[
        path:'/',
        components:{
            // 三个视图是同时现实的，在default视图中显示Foo组件
            // 在a视图显示Bar组件
            // 在b视图显示Baz组件
            default: Foo,
            a:Bar,
            b:Baz
        }
    ]
})