vue中$router和$route的區別

本文轉載自查看原文 2020-05-17 15:10 2278 Vue

我們在 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 = [
    { 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。這兩種方式使用起來大致一樣，但還是有區別。

（以下顯示的）

可以看到 this.$route 顯示了當前激活的路由的信息對象。這個對象是局部的，可以獲取當前路由的 path, name, params, query 等屬性，這里就不細說了。

其中 $route.matched 是一個數組，包含了當前路由的所有嵌套記錄，即 routes 配置中的對象數組，包括自己的信息和 children 數據。比如我的 routes 配置為：

const router = new VueRouter({
  routes: [
    // 下面的對象就是路由記錄
 { path: '/taskList', component: TaskList, name: '任務列表', children: [ { path: '/taskDetail', component: TaskDetail, name: '任務詳情' } ] } ] })

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