欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2019年08月14日 09:52:04   作者：古墩古墩  
這篇文章主要介紹了vue 中 命名視圖的用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友參考下吧

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

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

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

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

下面就來介紹命名視圖的作用，首先，一般情況下，我們在路由配置中，一個路由路徑只能對應(yīng)一個組件，若想對應(yīng)多個組件，必須得作為子組件存在，然后再一個公用的視圖內(nèi)顯示，這是一個路由對應(yīng)多個組件，這些組件對應(yīng)一個視圖

例如：

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

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

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

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

解釋一下：

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

第一個非未命名視圖顯示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>默認(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
　　　　　　　　}
　　　　　　}
　　　　]
　　}
]

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

總結(jié)

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

相關(guān)文章

最新評論