前言
最近在学习Vue的路由,总是搞混this. r o u t e r 和 t h i s . router和this. router和this.route,现记录一下。
首先,Vue Router官方文档有这么一句:通过注入路由器,我们可以在任何组件内通过 this.$router
访问路由器,也可以通过 this.$route
访问当前路由!
由此可知:
-
this.$router
相当于一个全局的路由器对象,包含了很多属性和对象(比如history
对象),任何页面都可以调用其push()
,replace()
,go()
等方法。this.$router.push()
想要导航到不同的 URL,则使用
router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。当你点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(…)。
例:
// 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }})
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
const userId = '123' router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path: `/user/${userId}` }) // -> /user/123 // 这里的 params 不生效 router.push({ path: '/user', params: { userId }}) // -> /user
同样的规则也适用于
router-link
组件的to
属性。params 传参,push 里面只能是 name:‘xxx’,不能是 path:’/xxx’,因为 params 只能用 name 来引入路由,如果这里写成了 path ,接收参数页面会是 undefined。
this.$router.replace()
跟
router.push
很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。点击返回,会跳转到上上一个页面。上一个记录是不存在的。this.$router.go()
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似
window.history.go(n)
。例:
// 在浏览器记录中前进一步,等同于 history.forward() router.go(1) // 后退一步记录,等同于 history.back() router.go(-1) // 前进 3 步记录 router.go(3) // 如果 history 记录不够用,那就默默地失败呗 router.go(-100) router.go(100)
-
this.$route
表示当前路由对象,每一个路由都会有一个route
对象,是一个局部的对象,可以获取对应的name
,path
,params
,query
等属性。
总结
this.$route
是路由参数对象,所有路由中的参数,params
,query
都属于它。
this.$router
是一个路由(导航对象),用它方便的使用js 代码,实现路由的前进,后退,跳转到新的url地址。