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。 这两种方式使用起来大致一样，但是有区别。

this.$route显示了当前激活的路由的信息对象，这个对象是局部的，可以获取当前路由的path, name, params, query等属性

其中，$route.matched是一个数组，包含了当前路由的所有嵌套记录，即routers配置中的对象数组，包含自己的信息和children数据。

此外，在vue实例内部，还可以通过this.$router访问路由实例，它是一个全局的路由实例，通过vue根实例中注入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

---

$route是$router正在跳转的路由对象，可以获取name, path, params, query等；

$router是VueRouter的实例，相当于一个全局的路由器对象，里面包含很多属性和子对象，例如history对象。相当于router-like的a标签，使用$router.push跳转页面，这个方法会向history栈添加一个新的记录，所以当点击后退，使用$router.go则返回上一个页面。经常用的跳转链接就可以使用this.$router.push,和router-link跳转一样。

---

VUE从入门到放弃（平摊手）~~~~~~~~