今天主要記錄 vue中命名視圖的用法
先奉上官網網址：https://router.vuejs.org/zh/guide/essentials/named-views.html
一般情況下，一個頁面里面可能有多個組件，比如側邊欄，內容區，側邊欄是一個組件、內容區是一個組件，我們普遍會將兩個組件作為子組件添加到主頁面中，因為頁面中只有一個
router-view視圖，那么問題來了，怎么讓一個頁面中有多個視圖呢，擁有多個視圖，很隨意，多寫幾個router-view標簽就行了，但是每個router-view視圖里面顯示的相同的內容，這是一個問題，多寫幾個視圖好像沒什么用，那么怎么讓一個頁面中的多個視圖顯示不同的內容呢？
下面就來介紹命名視圖的作用，首先，一般情況下，我們在路由配置中，一個路由路徑只能對應一個組件，若想對應多個組件，必須得作為子組件存在，然后再一個公用的視圖內顯示，這是一個路由對應多個組件，這些組件對應一個視圖
例如：
{
path:'tv',
name:'tv',
component:Tv,
children:[
{path:'',component:Zhonghe},
{path:'zhonghe',component:Zhonghe},
{path:'guochan',component:Guochan},
{path:'yingmei',component:Yingmei},
{path:'riju',component:Riju},
{path:'hanju',component:Hanju}
]
},
那么，下面來介紹命名視圖：有時候想同時 (同級) 展示多個視圖，而不是嵌套展示，例如創建一個布局，有 sidebar (側導航) 和 main (主內容) 兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 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>
一個視圖使用一個組件渲染，因此對於同個路由，多個視圖就需要多個組件。確保正確使用 components配置 (帶上 s)：
const router = new VueRouter({ routes: [ { path: '/', components: { default: Foo, a: Bar, b: Baz } } ] })
解釋一下：
在這個默認路由下，
第一個非未命名視圖顯示Foo組件
第二個name名為a的視圖顯示Bar組件
第二個name名為b的視圖顯示Baz組件
然后自己有些了個demo
<template>
<div class="hello">
<ul class="nav">
<li><router-link to="/list1">list1</router-link></li>
<li><router-link to="/list2">list2</router-link></li>
<li><router-link to="/list3">list3</router-link></li>
</ul>
<h6>默認視圖</h6>
<div class="view">
<router-view></router-view>
</div>
<h6>a視圖</h6>
<div class="view">
<router-view name="a"></router-view>
</div>
<h6>b視圖</h6>
<div class="view">
<router-view name="b"></router-view>
</div>
</div>
</template>
router配置：
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children:[
{
path:'',
components:{
default:List1,
a:List2,
b:List3
}
},
{
path:'list1',
components:{
default:List1,
a:List2,
b:List3
}
},
{
path:'list2',
components:{
default:List2,
a:List1,
b:List3
}
},
{
path:'list3',
components:{
default:List3,
a:List1,
b:List2
}
}
]
}
]
這樣會讓也面很靈活，可以研究一下
