vue-router命名視圖的使用講解

更新時(shí)間：2019年01月19日 12:01:38 作者：muzidigbig

今天小編就為大家分享一篇關(guān)于vue-router命名視圖的使用講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧

有時(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)文章

Vue獲取圖片MD5的方法詳解
計(jì)算圖片的MD5可以將其作為圖片的唯一標(biāo)識(shí),從而優(yōu)化對(duì)圖片的存儲(chǔ)和檢索效率,本文主要介紹了Vue獲取圖片MD5的常用方法,感興趣的可以了解下
2024-12-12
vue 微信掃碼登錄(自定義樣式)
這篇文章主要介紹了vue 微信掃碼登錄(自定義樣式)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
vue項(xiàng)目適配屏幕分辨率與屏幕的縮放適配詳細(xì)教程
現(xiàn)在很多14寸的筆記本，出廠默認(rèn)就是150%的顯示。導(dǎo)致很多時(shí)候我們的項(xiàng)目，自己開發(fā)的時(shí)候都是按照100%比例來開發(fā)的，上線了就會(huì)發(fā)現(xiàn)這個(gè)問題，今天就這個(gè)問題給出解決方案，感興趣的朋友跟隨小編一起看看吧
2022-11-11
vue3 element-plus二次封裝組件系列之伸縮菜單制作
這篇文章主要介紹了vue3 element-plus二次封裝組件系列之伸縮菜單制作,是基于vue3 vite element-plus搭建的，值的注意的時(shí)候，里面的圖標(biāo)組件是經(jīng)過處理的，結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-01-01
vue項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例
移動(dòng)端頁面適配，rem和vw適配方案，本文主要介紹了vue項(xiàng)目中使用rem替換px的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)一個(gè)自定義toast?小彈窗,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
vue2使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽
這篇文章主要為大家詳細(xì)介紹了vue2如何使用el-tag實(shí)現(xiàn)自定義菜單導(dǎo)航標(biāo)簽,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12
這篇文章主要介紹了vue中點(diǎn)擊切換按鈕功能之點(diǎn)啟用后按鈕變?yōu)榻霉δ埽疚耐ㄟ^實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-09-09