VueRouter中$router和$route的区别

在使用路由的时候有如下步骤：
1、创建要使用路由的组件
2、创建routes，配置路由映射表
3、new一个Vue Router命名为router，并将routes作为一个对象添加到router中
4、将router在Vue中进行注册

let home = {
  data(){
        return {}
    },
    template:"<div>我是home组件</div>"
}
let list = {
    data(){
        return {}
    },
    template:"<div>我是list组件</div>"
}
let router = new VueRouter({
    routes:[{
        path:"/home",
        components:home
    },{
        path:"/list",
        components:list
    }]
})
new Vue({
    el:'#app',
    data(){
        return {}
    },
    methods:{},
    components:{
        home,
        list
    },
    router,
    created(){
        console.log(this);
        console.log(this.$router);
        console.log(this.$route);
    }
})

而在创建完成后，在vue实例中输出this输出，打开查看可以看到$router和$route中都已经有内容了，如果没有绑定router这两个的值都是undefined；

而直接输出this.$router的是我们之前创建的Vue Router实例，在这个实例上有一个options属性，这里面存储了我们在Vue Router实例中注册的routes路由映射表：

输出this.$router的结果

VueRouter {app: Vue, apps: Array(1), options: {…}, beforeHooks: Array(0), 
resolveHooks: Array(0), …}

查看this.$router上的options属性的结果：

options:
	routes: Array(2)
		0: {path: "/home", components: {…}}
		1: {path: "/list", components: {…}}

且在this. $router的__proto__属性上存储了back、forward、go、onready、push…等方法。
简单说 $router就是全局的路由的实例。

而直接输出this. $route的结果是一个大对象，里面存储了当前页面的一些路由的信息，包含了当前URL解析得到的信息，如name、path、params、query等属性。

this. $route的输出结果如下：

{name: null, meta: {…}, path: "/", hash: "", query: {…}, …}

总结：this.$ router就是VueRouter的实例方法，当跳转到不同的URL，可以使用this.$ router上的方法进行处理，如push、go…
this.$ route就是当前页面激活的路由，包含当前URL解析得到的数据，如路径、参数等，可以从对象中获取到当前地址的一些数据。