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

這篇文章介紹的內容是關於淺析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: '/',
      components: {        default: Foo,
        a: SideBar,
        b: Header
      }
    }
  ]

               

相關建議：

路由與命名檢視

vue中命名檢視

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

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