vue-router详解及实例
r
o
u
t
e
r
、
router、
router、route、
r
o
u
t
e
r
.
p
u
s
h
(
)
和
、
router.push()和、
router.push()和、router.replace()
一、this.$router
this.$router
是VueRouter
的一个对象,表示全局路由器对象,项目中通过router
路由参数注入路由之后,在任何一个页面都可以通过此方法获取到路由器对象,并调用其push(), go()
等方法
二、this.$route
this.$route
表示当前正在用于跳转的路由器对象,可以调用其name、path、query、params
等方法
路由跳转方法push、replace、go、back
push()
本质是向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录
push()
传递参数params
和query
和接收参数
字符串
this.$router.push(name)
this.$router.push(path)
对象
传参:name搭配params (类似post)
this.$router.push({
name:'xxx',
params:{
id:id
}
})
接收参数:
this.$route.params.id
传参: path搭配query (类似get)
this.$router.push({
path:'/xxx',
query:{
id:id
}
})
接收参数:
this.$route.query.id
replace()
就不可以通过浏览器的
<
按钮回到上一页
替换路由,没有历史记录,点击返回,会跳转到上一个页面
this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似
window.history.go(n)
。n可为正数可为负数。正数返回上一个页面
this.$router.back();
返回上一页