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