1. this.$route 当前的路由对象(是当前的路由信息)
在使用了vue-router
的应用中,路由对象会被注入到每个组件中,赋值为$route
, 当切换路由时,路由对象会被更新。this.$route
表示当前的路由对象
在每一个路由中都会有一个
$route
对象,它是一个局部对象,是当前的路由信息$route
具有如下属性
this.$route.path
: 当前路由的路径,会被解析为绝对路径 如:'/home/new.vue'
this.$route.params
: 包含路由中的动态片段和全匹配片段的键值对
3.this.$route.router
: 路由规则所属的路由器(以及其所属的组件)
this.$route.matched
: 包含当前匹配的路径中所包含的所有片段所对应 的配置参数对象this.$route.name
: 当前路径的名字
2. this.$router 全局的路由对象
this.$router
包含了很多属性和方法, 任何页面都可以调用。 $router
是一组路由或者说是一种机制,他管理了一组路由$route
。
- 简单的来说,
$route
只是进行了URL 和函数的映射,而在接收了一个URL以后,去路由映射表中查找相应的函数这个过程是由$router
来处理的
*$router
具有如下属性
1.push()
方法: 这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
字符串this.$router.push('home')
对象 this.$router.push({path:'home'})
命名的路由 this.$router.push({name:'user', params:{userId: '123'}})
==》/这里的 params
不生效
- 正确写法:
const userId = '123';
*this.$router.push({path:`/user/${userId}`});
2 .back()
方法,后退一步this.$router.back();
3.forward()
方法,前进一步 this.$router.forward();
4.go()
方法 可前进可后退
this.$router.go(-1)
后退一步
this.$router.go(2)
前进两步,但当步数大于历史记录数,就会无效,是无效,而不是取一个最大值
this.$router.go(0)
会刷新页面