this.$route和this.$router如果对路由概念很清楚,是非常容易混淆的。
关于this.$route 官方的API介绍是这样的:
一个路由对象(route object)表示当前激活的路由的状态信息,包含了当前URL解析得到的信息,还有URL匹配到的路由记录(route records).路由对象是不可变的,每次成功的导航后都会产生一个新的对象。
如果是有过后端开发,比如PHP语言的经验,那么肯定对路由有一定了解,看到这里大概是能感知到这里的Vue路由概念包含的意义。
从语法结构上,既然是对象,那么可以如下表示:
{/* 这里是路由对象的属性和值 */}
既然定义里提到了URL解析后的信息,那么一定是有关于URL的一些内容,比如常见的域名,路径,端口等等。路由记录应该就是访问过哪些页面了(Vue组件)
为了证实猜想,就拿Vue的脚手架搭建一个Demo看看,并且打印一下这个路由对象,看看有什么:
//分别在初始化的两个组件内的mounted生命周期添加打印信息 export default { name: "Home", mounted() { console.log("Home"); console.log(this.$route); } }; export default { name: "About", mounted() { console.log("About"); console.log(this.$route); } };
打印结果分别如下:
可以得到的信息,确实是一个对象({}),然后有一些属性,比如name,meta,path,hash,query,params,fullPath等等。可以得到一些有用的数据:
this.$route.name 路由配置的name
this.$route.fullPath 得到完整的路由路径,包含查询部分
this.$route.matched 这是一个数组了,也就是定义提到的匹配到的路由记录都在这里
this.$route.matched[n].meta 第N条匹配到的路由记录的meta信息
this.$route.matched[n].components 第N条匹配到的路由记录的关于组件的信息
this.$route.params 路由传参(在URL当中作为变量传递)
this.$route.query 路由传参 (URL中'?'后面的部分)
this.$route.path 当前路由的路径
从以上信息可以看到,当访问到某个页面,就可以通过this.$route相关的对象属性获取对应的信息。
那么 this.$router 又是什么,在API首页其实已经又了介绍:
Vue Router是Vue.js 官方的路由管理器
当然仅仅这一句很难理解,太抽象,即使后面又把它的功能讲出来了,还是不太直观,所以还是打印看看:
export default { name: "Home", mounted() { console.log("Home"); console.log(this.$router); } }; export default { name: "About", mounted() { console.log("About"); console.log(this.$router); } };
发现了一个亮点,当前在某个页面则 this.$router.histrory.current 里面的信息和 this.$route里面的一些信息相同。并且this.$routers.options 里面也包含其他的全部的路由信息,所以,this.$router应该是有全部路由配置的信息,而this.$route只针对当前正在访问的。
可想而知,如果针对当前访问的页面,想获取页面路由信息,那么应该使用的是this.$route,如果说想从一个页面到另外一个页面(涉及路由切换),应该是使用this.$router的方法,因为只有它有其他路由对象的信息。