Vue中实现路由跳转的四种方式
1.this. $router.push(‘url’)跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面push 后面可以是对象,也可以是字符串:// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$router.push({
·
1.this. $router.push(‘url’)
跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面
push 后面可以是对象,也可以是字符串:
// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
2.router-link 【实现跳转最简单的方法】
<router-link to='需要跳转到的页面的路径>
浏览器在解析时,将它解析成一个类似于a标签。
<li >
<router-link to="/home/first">点击验证动画效果 </router-link>
</li>
3.this. $router.replace(‘url’)
跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
replace后面可以是对象,也可以是字符串:
// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
4.this. $router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
this. $router.go(1) //前进一步 相当于history.forward()
this. $router.go(-1) //后退一步 相当于history.back()
this. $router.go(10)
更多推荐
已为社区贡献1条内容
所有评论(0)