快捷導(dǎo)航

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

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

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

有時候想同時（同級）展示多個視圖，而不是嵌套展示，例如創(chuàng)建一個布局，有 sidebar（側(cè)導(dǎo)航）和 main（主內(nèi)容）兩個視圖，這個時候命名視圖就派上用場了。你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口。如果 router-view 沒有設(shè)置名字，那么默認為 default。

如果按照他解釋的這么簡單的話，完全可以在根組件app.vue里直接引入sidebar組件，注冊，渲染。沒必要多此一舉。既然可以在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里面可以多注冊幾個命名視圖，就可以

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

一、簡單的命名視圖（就是點擊不同的路由跳轉(zhuǎn)后來實現(xiàn)顯示多個組件內(nèi)容）

效果：

二、嵌套路由視圖（同時滿足嵌套路由的規(guī)則，還要滿足視圖的規(guī)則）

若有不足請多多指教！希望給您帶來幫助！

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

您可能感興趣的文章:

相關(guān)文章

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