界面中拥有多个单独命名的视图,如果 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,
}
]
})