- 定义
命名视图就是给路由出口设置class属性。
<router-view class="view-one"></router-view>2.使用背景
需要同时展示多个视图，在界面中拥有多个单独命名的视图而不是只有一个路由出口。
3.路由设置
因为一个视图只能渲染一个组件，因此要渲染多个视图就要使用多个组件。现在，跟单个视图不同的是，路由的组件必须设置多个，并且修改component为复数。
const router=new VueRouter({
routes:[
{
path:'/',
components:{
default:Fo,
nav:Bar,
sidebar:Baz
}
}
]
})4.如何使用
在里设置name属性，就可以对应渲染出组件。
5.例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HelloWorld</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const Foo = { template: '<div>This is Home</div>' }
const Baz = { template: '<div>This is baz</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }
const router=new VueRouter({
routes:[
{
path:'/',
components:{
default:Foo,
nav:Bar,
sidebar:Baz
}
}
]
})
new Vue({
router,
template: `
<div id="app">
<router-view></router-view>
<router-view name="nav" class="left"></router-view>
<router-view name="sidebar" class="right"></router-view>
</div>
`
}).$mount('#app')
</script>
</body>
</html> 6.嵌套命名视图
定义：嵌套命名视图在路由里有个children属性用于定义子路由。子路由的出口必须在父路由里，否则子路由不显示。子路由的组件components属性里设置了视图的name值为属性名。