vue中的router-view

目錄

基礎使用

小劇場

vue-router是vue中的路由，使用 Vue.js ，我們已經可以通過組合元件來組成應用程式，當你要把 Vue Router 添加進來，我們需要做的是，将元件 (components) 映射到路由 (routes)，然後告訴 Vue Router 在哪裡渲染它們。

vue-router的官方文檔：https://router.vuejs.org/zh/guide/

在vue檔案中，即通過<router-view></router-view>或者<router-view />來渲染路由比對到的元件。

路由檔案index.js中：

App.vue檔案中：

那麼在浏覽器位址欄通路根路徑 “http://localhost:8080/” 時，頁面就會渲染Home元件；通路 “http://localhost:8080/about” 時，頁面就會渲染About元件，進而實作了元件的動态渲染。

在真實項目中，router-view不僅僅隻用于App.vue檔案中，還會用于整體布局檔案。如layout.vue檔案，就是為了實作網站頭、尾、導航欄、内容區分隔，使切換路由時隻變換内容區，頭、尾、導航欄等公共部分不做切換。

這時，路由檔案中就會出現“children”子路由：

Layout.vue檔案中：

此處，渲染順序即為：在浏覽器通路項目根路徑時，App.vue先渲染Layout元件，然後再有Layout元件渲染index元件。

相當于layout元件是index.vue（首頁）的父元件，此處還可以使用父子元件傳值的方式，傳遞參數。

相當于可以把layout頁面當作一個中間頁面，來判斷一些參數，跳轉到其他頁面。

我在項目中實作不同工單頁面的跳轉時，就用到了這個特性。

實作如下：

Index.vue檔案中：