今天主要記錄  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 　　　　　　　　} 　　　　　　} 　　　　] 　　} ]   這樣會讓也面很靈活，可以研究一下