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,
     
    }
  ]
})