Vue路由-命名视图

1.什么是命名视图

在开发中，有时候想同时或同级展示多个视图，而不是嵌套展示，则可以在页面中定义多个单独命名的视图。

例如，创建一个布局，有header(头部区域)、sidebar(侧导航区域)和mainBox(主体区域)3个视图，这时候就可以使用命名视图来实现。

使用<router-view>可以为视图进行命名，它主要用来负责路由跳转后组件的展示。

在<router-view>上定义name属性表示视图的名字，然后就可以根据不同的name值展示不同的页面，如left，main等。如果<router-view>没有设置名字，那么默认为default

2.命名视图案例

Vue

<div id="app">
<router-view></router-views>
<div class="container">
<router-view name="left"></router-view>
<router-view name="main"></router-view>
</div>
</div>


var header = {temlate:'<h1 class="header">header头部区域</h1>'}
var sidebar = {temlate:'<h1 class="sidebar">sidebar侧导航区域</h1>'}
var mainBox = {temlate:'h1 class="main">mainBox主体区域</h1>'}

var router = new VueRouter({

    routes:[{
       path:'/',
       components:{
      'default':header,
       'left':sidebar,
       'main': mainBox
}
}]
})

var vm = new Vue({  el:'#app',router})

浏览量 9

1.什么是命名视图

2.命名视图案例

相关文章：