chaihongjun.me

Vue-router路由学习笔记$router和$route的区别

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);
  }
};

打印结果分别如下:
Vue-router路由学习笔记$router和$route的区别Vue-router路由学习笔记$router和$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);
  }
};

Vue-router路由学习笔记$router和$route的区别

Vue-router路由学习笔记$router和$route的区别

发现了一个亮点,当前在某个页面则 this.$router.histrory.current 里面的信息和 this.$route里面的一些信息相同。并且this.$routers.options 里面也包含其他的全部的路由信息,所以,this.$router应该是有全部路由配置的信息,而this.$route只针对当前正在访问的。

可想而知,如果针对当前访问的页面,想获取页面路由信息,那么应该使用的是this.$route,如果说想从一个页面到另外一个页面(涉及路由切换),应该是使用this.$router的方法,因为只有它有其他路由对象的信息。

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»