vue-router命名视图

界面中拥有多个单独命名的视图，如果 router-view 没有设置名字，那么默认为default.

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

name="a",name="b",对视图命名

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

一个视图在一个路中由需要一个组件渲染：components:{ default:Foo, a : Bzr, b:baz};如下，

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

嵌套命名视图：命名用到的嵌套 router-view 组件，

<router-view/>

<router -view name="helper"/> //命名嵌套组件name="helper";

<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

定义路由完成布局，命名视图"helper"嵌套在"UserSettings"组件中。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/settings',
      // You could also have named views at tho top
      component: UserSettings,
     
    }
  ]
})