vue-router命名視圖的使用講解
有時(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。
如果按照他解釋的這么簡(jiǎn)單的話，完全可以在根組件app.vue里直接引入sidebar組件，注冊(cè)，渲染。沒必要多此一舉。既然可以在route.config.js里面靈活配置，那就可以靈活的用。官網(wǎng)的例子：
<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>
const router = new VueRouter({
routes: [
{
path: '/',
components: { default: Foo, a: Bar, b: Baz }
}
]
})
在app.vue里面可以多注冊(cè)幾個(gè)命名視圖，就可以
<template>
<div id="app">
<router-view></router-view>
<router-view name="nav"></router-view>
<router-view name="side"></router-view>
</div>
</template>
{
path: '/home',
name: 'Home',
components: {
default: Home,
nav: Nav,//不給的話就不渲染
side: Side
},
children: [
{ path: '/', component: Home },//不給的話就匹配不到子組件，就不渲染
{ path: 'post', component: Post }
]
}
一、簡(jiǎn)單的命名視圖（就是點(diǎn)擊不同的路由跳轉(zhuǎn)后來實(shí)現(xiàn)顯示多個(gè)組件內(nèi)容）
效果：
二、嵌套路由視圖（同時(shí)滿足嵌套路由的規(guī)則，還要滿足視圖的規(guī)則）
若有不足請(qǐng)多多指教！希望給您帶來幫助！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接
相關(guān)文章
這篇文章主要介紹了使用Vant如何完成各種Toast提示框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要給大家介紹了關(guān)于Vue中extends繼承和組件復(fù)用性的相關(guān)資料,組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,需要的朋友可以參考下2023-11-11
vue-resource 攔截器interceptors使用詳解
這篇文章主要介紹了vue-resource 攔截器interceptors使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
關(guān)于vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問題
這篇文章主要介紹了vue3?解決getCurrentInstance?打包后線上環(huán)境報(bào)錯(cuò)問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue3?自定義圖片放大器效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
vue頁(yè)面中使用getElementsByClassName無法獲取元素的解決
這篇文章主要介紹了vue頁(yè)面中使用getElementsByClassName無法獲取元素的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化
這篇文章主要給大家介紹了關(guān)于Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化的相關(guān)資料,pinia是Vue的存儲(chǔ)庫(kù),它允許您跨組件/頁(yè)面共享狀態(tài),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue項(xiàng)目識(shí)別不到@別名問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼
這篇文章主要介紹了基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了在vue中封裝方法以及多處引用該方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08