vue路由--命名视图

标题

有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

代码

App.vue

<template>
  <div id="app">
    <div class="list-group">
      <router-link class="list-group-item" to="/home">Go to Foo</router-link>
      <router-link class="list-group-item" to="/about">Go to Bar</router-link>
    </div>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>
</template>

component新建四个vue组件 内容为

<template>
  <div>
    <h1>Home</h1>
    <p>a</p>
  </div>
</template>

router下index.js

export default new Router({
  routes: [
    {
      path: '/home',
      components: {
        a: homea,
        b: homeb
      }
    },
    {
      path: '/about',
      components: {
        a: abouta,
        b: aboutb
      }
    }
  ]
})

运行效果：

vue路由–命名视图 https://www.bbsmax.com/A/6pdDxZqldw/