快捷導(dǎo)航

vue 中命名視圖的用法實(shí)例詳解

更新時(shí)間：2019年08月14日 09:52:04 作者：古墩古墩

這篇文章主要介紹了vue 中命名視圖的用法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

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

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

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

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

下面就來(lá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}
　　]
},

那么，下面來(lái)介紹命名視圖：有時(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 沒(méi)有設(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>

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

這樣會(huì)讓也面很靈活，可以研究一下

總結(jié)

以上所述是小編給大家介紹的vue 中命名視圖的用法 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: