今天主要記錄  vue中命名視圖的用法

先奉上官網(wǎng)網(wǎng)址：https://router.vuejs.org/zh/guide/essentials/named-views.html

一般情況下，一個(gè)頁面里面可能有多個(gè)組件，比如側(cè)邊欄，內(nèi)容區(qū)，側(cè)邊欄是一個(gè)組件、內(nèi)容區(qū)是一個(gè)組件，我們普遍會(huì)將兩個(gè)組件作為子組件添加到主頁面中，因?yàn)轫撁嬷兄挥幸粋€(gè)

router-view視圖，那么問題來了，怎么讓一個(gè)頁面中有多個(gè)視圖呢，擁有多個(gè)視圖，很隨意，多寫幾個(gè)router-view標(biāo)簽就行了，但是每個(gè)router-view視圖里面顯示的相同的內(nèi)容，這是一個(gè)問題，多寫幾個(gè)視圖好像沒什么用，那么怎么讓一個(gè)頁面中的多個(gè)視圖顯示不同的內(nèi)容呢？

下面就來介紹命名視圖的作用，首先，一般情況下，我們?cè)诼酚膳渲弥校粋€(gè)路由路徑只能對(duì)應(yīng)一個(gè)組件，若想對(duì)應(yīng)多個(gè)組件，必須得作為子組件存在，然后再一個(gè)公用的視圖內(nèi)顯示，這是一個(gè)路由對(duì)應(yīng)多個(gè)組件，這些組件對(duì)應(yīng)一個(gè)視圖

例如：

{　　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}　　]},

那么，下面來介紹命名視圖：有時(shí)候想同時(shí) (同級(jí)) 展示多個(gè)視圖，而不是嵌套展示，例如創(chuàng)建一個(gè)布局，有 sidebar (側(cè)導(dǎo)航) 和 main (主內(nèi)容) 兩個(gè)視圖，這個(gè)時(shí)候命名視圖就派上用場(chǎng)了。你可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口。如果 router-view 沒有設(shè)置名字，那么默認(rèn)為 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>

一個(gè)視圖使用一個(gè)組件渲染，因此對(duì)于同個(gè)路由，多個(gè)視圖就需要多個(gè)組件。確保正確使用 components配置 (帶上 s)：

const router = new VueRouter({ routes: [  {   path: '/',   components: {    default: Foo,    a: Bar,    b: Baz   }  } ]})

解釋一下：

在這個(gè)默認(rèn)路由下，

第一個(gè)非未命名視圖顯示Foo組件

第二個(gè)name名為a的視圖顯示Bar組件

第二個(gè)name名為b的視圖顯示Baz組件

然后自己有些了個(gè)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>默認(rèn)視圖</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>