詳解vue中$router和$route的區別
我們在 vue 專案中一般都會用到路由,而 vue-router 是 vue.js 官方的路由管理器。
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 = [ { path: '/home',component: Home },{ path: '/user程式設計客棧',component: User } ] const router = new Router({ routes })
4.在 vue 根例項中注入路由,這樣就可以在其他任何元件中訪問路由了 --- main.js
import router from './router' new Vue({ router,render: h => h(App) }).$mount('#app')
大體步驟就以上這些
好了,咱們的豬腳要開始現身了﹏~*在上面 user 和 home 元件內訪問路由有兩種方式:this.$router和this.$route。這兩種方式使用起來大致一樣,但還是有區別。(以下顯www.cppcns.com示的)
可以看到this.$route 顯示了當前啟用的路由的資訊物件。這個物件是區域性的,可以獲取當前路由的 path,query 等屬性,這裡就不細說了。
其中$route.matched是一個數組,包含了當前路由的所有巢狀記錄,即 routes 配置中的物件陣列,包括 自己的資訊和 children 資料。比如我的 routes 配置為:
const router = new VueRouter({
routes: [
www.cppcns.com // 下面的物件就是路由記錄
{
path: '/taskList',component: TaskList,name: '任務列表',children: [
{
path: '/taskDetail',component: TaskDetaihttp://www.cppcns.coml,name: '任務詳情'
}
]
}
]
})
得到的 this.$route 中 matched 展開結果為:
比如用導航守衛做登入功能時,若需要檢測 meta 來判斷是否需要登入的情況時,就可以通過遍歷 $route.matched 來檢查路由記錄中的 meta 欄位。
此外,在 vue 例項內部,還可以通過this.$router訪問路由例項,它是一個全域性的路由例項,通過 vue 根例項中注入 router 例項,然後再注入到每個子元件,從而讓整個應用都有路由功能。在任何子元件中列印 this.$router 得到如下:
其中包含了很多屬性和物件(比如 history 物件),任何頁面也都可以呼叫其 push(),go() 等方法。
push()方法會向 history 中新增一個記錄,當點選瀏覽器的返回按鈕時可以退回到前一個頁面,當我們點選 <router-link to=' ... ' /> 時等同於呼叫了 this.$router.push()。
- this.$router.push() 方法的引數可以是一個字串路徑,或則是一個地址物件,例如:
- this.$router.push('home') this.$router.push({path: 'home'})
也可以攜帶引數,但是要注意:如果提供了 path, params 會被忽略,例如:
this.$router.push({path: 'home',params: { page: 2}}) 這裡的params會被忽略
同樣的規則也適用於 router-link 的 to 屬性
可以使用以下幾種方法:
- this.$router.push({path: `/home/${page=2}``})
- this.$router.push({name: 'home',params: { page: 2}})
- this.$router.push({path: 'home',qu程式設計客棧ery: { page: 2}})
這幾種方法獲取引數的方式:this.$route.params.page / this.$route.query.page
以上就是詳解vue中$router和$route的區別的詳細內容,更多關於vue的資料請關注我們其它相關文章!