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

⊙△⊙﹏ ﹏ 吼吼吼 终于写完了，若有不足，欢迎各位童鞋指正~╭（′▽‵）╭（′▽‵）╭（′▽‵）╯~~~