vue中 router和 route的區別

我們在 vue 專案中一般都會用到路由，而 vue-router 是 vue.js 官方的路由管理器。之前也有被問到 router 相關的問題，今天閒來掰扯掰扯~~~::)

∪﹏∪ 太長不看版 ↓

| this.$route：當前啟用的路由的資訊物件。每個物件都是區域性的，可以獲取當前路由的 path, name, params, query 等屬性。

| this.$router：全域性的 router 例項。通過 vue 根例項中注入 router 例項，然後再注入到每個子元件，從而讓整個應用都有路由功能。其中包含了很多屬性和物件（比如 history 物件），任何頁面也都可以呼叫其 push(), replace(), go() 等方法。

用過 vue 的童鞋都知道，路由跳轉分為程式設計式和宣告式。

宣告式

簡單來說，就是使用 router-link 元件來導航，通過傳入 to 屬性指定鏈結（router-link 缺省會被渲染成乙個a標籤）。

當需要在乙個頁面中巢狀子路由，並且頁面不跳轉的時候，這種方式不要太好用啊哈哈哈... 只需要將子頁面渲染在 router-view 裡面就可以了。

程式設計式

採用這種方式就需要匯入 vuerouter 並呼叫了。

然後我再來嘮嘮 vue-router 的使用步驟（以下採用程式設計式方式）：

1. 定義兩個路由跳轉的單 .vue 元件：home.vue 和 user.vue；

2. 匯入 vue, vue-router，並定義路由，每個路由包含乙個 component 屬性，這個屬性對映乙個元件 --- router.js

import vue from 'vue'import router from 'vue-router'import home from './home.vue'import user from './user.vue'vue.use(router);

3. 建立 router 例項，並傳遞 routes 配置 --- router.js

const routes =[
,]const router = newrouter()

4. 在 vue 根例項中注入路由，這樣就可以在其他任何元件中訪問路由了 --- main.js

importrouterfrom './router'
newvue(]}
]})

得到的 this.$route 中 matched 展開結果為：

比如用導航守衛做登入功能時，若需要檢測 meta 來判斷是否需要登入的情況時，就可以通過遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

此外，在 vue 例項內部，還可以通過this.$router訪問路由例項，它是乙個全域性的路由例項，通過 vue 根例項中注入 router 例項，然後再注入到每個子元件，從而讓整個應用都有路由功能。在任何子元件中列印 this.$router 得到如下：

其中包含了很多屬性和物件（比如 history 物件），任何頁面也都可以呼叫其 push(), replace(), go() 等方法。

push() 方法會向 history 中新增乙個記錄，當點選瀏覽器的返回按鈕時可以退回到前乙個頁面，當我們點選時等同於呼叫了 this.$router.push()。

this.$router.push() 方法的引數可以是乙個字串路徑，或則是乙個位址物件，例如：

也可以攜帶引數，但是要注意：如果提供了 path， params 會被忽略，例如：

同樣的規則也適用於 router-link 的 to 屬性

可以使用以下幾種方法：

這幾種方法獲取引數的方式：this.$route.params.page / this.$route.query.page

⊙△⊙﹏﹏吼吼吼~~ 終於寫完了，如有不足，歡迎各位童鞋指正~~~╭（′▽‵）╭（′▽‵）╭（′▽‵）╯~~~

vue中 router和 route的區別

vue中 router和 route的區別

vue中router和route的區別

VUE中的路由router

vue中 router和 route的區別

vue中 router和 route的區別

vue中router和route的區別

VUE中的路由router

相關推薦