vue中$router和$route的區(qū)別有哪些

這篇文章主要介紹了vue中$router和$route的區(qū)別有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

我們在 vue 項(xiàng)目中一般都會(huì)用到路由，而 vue-router 是 vue.js 官方的路由管理器。

this.$route：當(dāng)前激活的路由的信息對象。每個(gè)對象都是局部的，可以獲取當(dāng)前路由的 path, name, params, query 等屬性。

this.$router：全局的 router 實(shí)例。通過 vue 根實(shí)例中注入 router 實(shí)例，然后再注入到每個(gè)子組件，從而讓整個(gè)應(yīng)用都有路由功能。其中包含了很多屬性和對象（比如 history 對象），任何頁面也都可以調(diào)用其 push(), replace(), go() 等方法。

用過 vue 的童鞋都知道，路由跳轉(zhuǎn)分為編程式和聲明式。

聲明式：

簡單來說，就是使用 router-link 組件來導(dǎo)航，通過傳入 to 屬性指定鏈接（router-link 默認(rèn)會(huì)被渲染成一個(gè)a標(biāo)簽）。

當(dāng)需要在一個(gè)頁面中嵌套子路由，并且頁面不跳轉(zhuǎn)的時(shí)候，這種方式不要太好用啊哈哈哈... 只需要將子頁面渲染在 router-view 里面就可以了。

編程式：

采用這種方式就需要導(dǎo)入 VueRouter 并調(diào)用了。

然后我再來嘮嘮 vue-router 的使用步驟（以下采用編程式方式）：

1.定義兩個(gè)路由跳轉(zhuǎn)的單 .vue 組件：home.vue 和 user.vue；

2.導(dǎo)入 vue, vue-router，并定義路由，每個(gè)路由包含一個(gè) component 屬性，這個(gè)屬性映射一個(gè)組件 --- 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.創(chuàng)建 router 實(shí)例，并傳遞 routes 配置 --- router.js

const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

const router = new Router({
    routes
})

4.在 vue 根實(shí)例中注入路由，這樣就可以在其他任何組件中訪問路由了 --- main.js

import router from './router'

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

大體步驟就以上這些

好了，咱們的豬腳要開始現(xiàn)身了﹏~*在上面 user 和 home 組件內(nèi)訪問路由有兩種方式：this.$router和this.$route。這兩種方式使用起來大致一樣，但還是有區(qū)別。（以下顯示的）

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

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

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

得到的 this.$route 中 matched 展開結(jié)果為：

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

此外，在 vue 實(shí)例內(nèi)部，還可以通過this.$router訪問路由實(shí)例，它是一個(gè)全局的路由實(shí)例，通過 vue 根實(shí)例中注入 router 實(shí)例，然后再注入到每個(gè)子組件，從而讓整個(gè)應(yīng)用都有路由功能。在任何子組件中打印 this.$router 得到如下：

其中包含了很多屬性和對象（比如 history 對象），任何頁面也都可以調(diào)用其 push(), replace(), go() 等方法。

push()方法會(huì)向 history 中添加一個(gè)記錄，當(dāng)點(diǎn)擊瀏覽器的返回按鈕時(shí)可以退回到前一個(gè)頁面，當(dāng)我們點(diǎn)擊 <router-link to=' ... ' /> 時(shí)等同于調(diào)用了 this.$router.push()。

• this.$router.push() 方法的參數(shù)可以是一個(gè)字符串路徑，或則是一個(gè)地址對象，例如：

• this.$router.push('home') this.$router.push({path: 'home'})

也可以攜帶參數(shù)，但是要注意：如果提供了 path， params 會(huì)被忽略，例如：

this.$router.push({path: 'home', params: { page: 2}}) 這里的params會(huì)被忽略

同樣的規(guī)則也適用于 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}})

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

Vue的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue中$router和$route的區(qū)別有哪些”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!