vue中 $router 和 $route 的区别

区别：

this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前URL解析得到的信息，还有URL匹配到的路由记录，包含当前路由的 path, name, params, query 等属性。

this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

可以将$router理解为一个容器去管理了一组$route，而$route是进行了当前URL和组件的映射。

编程式&声明式路由跳转：

声明式：使用 router-link 组件来导航，通过传入 to 属性指定链接（router-link 默认会被渲染成一个a标签）。当需要在一个页面中嵌套子路由，并且页面不跳转的时候，只需要将子页面渲染在 router-view 里面。

编程式：

1. 定义两个路由跳转的单 .vue 组件

2. 导入 vue, vue-router，并定义路由，每个路由包含一个 component 属性，这个属性映射一个组件  ---  router.js

3. 创建 router 实例，并传递 routes 配置  ---  router.js

4. 在 vue 根实例中注入路由，这样就可以在其他任何组件中访问路由了  ---  main.js