this.$router(代表全局的路由对象)
this.$router
全局路由对象,任何页面都可以通过此方法 调用 push(), go()等方法。一般用于路由跳转。
this.$router.push(路由)
跳转指定路由方式(传参:query与params):query方式传参路由的属性名是“path” , params方式传参路由的属性名是“name”
this.$router.push({
name: 'pageA',
params: {
// 这个arr在页面跳转时,会传到目标页,但是它并不会出现
// 地址栏中(因为在定义路由时,没有设置对应的占位符),
arr: [1, 2, 3, 4, 6],
id: 1,
age: 100
}
})
// 路由为/pageA/:id,params: {id: 123} 那么最后生成的路由为:/pageA/123/
this.$router.push({
path: '/pageB',
query: {
// query中的内容一定会在地址栏中出现
arr: [1, 2, 3, 4, 6],
id: 1,
age: 100
}
})
path: '/pageB',
query: {state: this.state}, // 这个是放在?后面的
// 如:this.$router.push({'path':'/pageB', query:{id=1}}),生成的路由为:/pageB?id=1
this.$route
this.$route
表示当前正在用于跳转的路由器对象。可用来接受当前路由,显示其name、path、query、params等属性
1.$route.path
字符串,等于当前路由对象的路径,会被解析为绝对路径,如 "/home/news" 。
2.$route.params
对象,包含路由中的动态片段和全匹配片段的键值对。
3.$route.query
对象,包含路由中查询参数的键值对。例如,对于 /home/news/detail/01?favorite=yes ,会得到$route.query.favorite == ‘yes‘ 。
4.$route.router
路由规则所属的路由器(以及其所属的组件)。
5.$route.matched
数组,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
6.$route.name
当前路径的名字,如果没有使用具名路径,则名字为空。
this.$route.query //表示获取?后的值
this.$route.params //路由名字“/”后的值