首頁 > web前端 > js教程 > 淺析Vue.js之動態路由以及命名視圖

淺析Vue.js之動態路由以及命名視圖

零到壹度
發布: 2018-04-21 11:32:04
原創
2249 人瀏覽過

這篇文章介紹的內容是關於淺析Vue.js之動態路由以及命名視圖,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

動態路由
動態路由其實又可以叫做路由傳參。

const router = new VueRouter({
  routes: [    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})
登入後複製

形狀如上述形式的路徑即為動態路由,冒號後面是參數,可以跟多段參數,每個參數都被設定到this.$route.params中。

注意/user/:id和/user/:name,當參數變化時,元件會被重複使用,因此元件生命週期鉤子不會再次呼叫。復用組成時,可以透過監聽$route物件的變化來監測路由是否變化。

路由鉤子beforeRouterUpdate也會執行。

vue-router 使用 path-to-regexp 作為路徑匹配引擎,如果路徑很複雜可以學習高階的匹配模式。但是路徑一般不應設計的太複雜,如果太複雜,應該考慮如何簡化

命名視圖

#有時候想同時(同級)展示多個視圖,例如建立一個佈局,有sidebar(側導航) 和main(主內容) 兩個視圖,這個時候命名視圖就派上用場了。你可以在介面中擁有多個單獨命名的視圖,而不是只有一個單獨的出口。如果 router-view 沒有設定名字,那麼預設為 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="sidebar"></router-view>
<router-view class="view three" name="header"></router-view>
登入後複製

一個視圖使用一個元件渲染,因此對於同一個路由,多個視圖就需要多個元件。確保正確使用components 設定(帶上s):

routes: [
    {
      path: &#39;/&#39;,
      components: {        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]
登入後複製

               

相關建議:

路由與命名檢視

vue中命名檢視

#vue-router 路由基礎簡單介紹

以上是淺析Vue.js之動態路由以及命名視圖的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - vue.js與html頁面之間的跳轉
來自於 1970-01-01 08:00:00
0
0
0
vue.js - ViewModel和Controller有什麼差別?
來自於 1970-01-01 08:00:00
0
0
0
javascript - 有大神做過vue.js spa單頁的SEO嗎?
來自於 1970-01-01 08:00:00
0
0
0
使用Vue.js Web元件與Pinia
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板