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 = \[
    { 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 展開結果爲：

好比用導航守衛作登陸功能時，若須要檢測 meta 來判斷是否須要登陸的狀況時，就能夠經過遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

此外，在 vue 實例內部，還能夠經過 this.$router 訪問路由實例，它是一個全局的路由實例，經過 vue 根實例中注入 router 實例，而後再注入到每一個子組件，從而讓整個應用都有路由功能。在任何子組件中打印 this.$router 獲得以下：

其中包含了不少屬性和對象（好比 history 對象），任何頁面也均可以調用其 push(), replace(), 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', query: { page: 2}})

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

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