- definition
classNaming a view is to set properties for routing exits .
<router-view class="view-one"></router-view>2. Use the background You
need to display multiple views at the same time, and have multiple individually named views in the interface instead of only one routing exit.
3. Routing settings
Because a view can only render one component, it is necessary to use multiple components to render multiple views. Now, unlike a single view, the routed component must be set to multiple, and modify the component to plural .
const router=new VueRouter({
routes:[
{
path:'/',
components:{
default:Fo,
nav:Bar,
sidebar:Baz
}
}
]
})4. How to
use Set nameproperties in , you can render components accordingly.
5. Examples
<!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. Nested named views
Definition : Nested named views have an childrenattribute in the route to define sub-routes. The egress of the child route must be in the parent route , otherwise the child route will not be displayed. componentsThe value of the view is set in the component property of the child route as the nameproperty name.