router-link 的replace属性 + 编程式路由导航

1.router-link 的replace属性

1.作用:控制路由跳转时操作浏览器历史记录的模式

2.浏览器的历史记录保存在一个栈里面,刚打开浏览器在 指针指向栈底。

3.浏览器的历史记录有两种写入方式:分别为 push 和 raplace, push 是追加历史记录,replace是替换当前记录。路由跳转时候默认为 push 模式。

4.如何开启 replace 模式:

 2.编程式路由导航

作用:不借助<router-link>实现路由跳转,让路由跳转更灵活。

<router-link>最终会转为a标签,如果某个导航项是用按钮button写的跳转,用<router-link>代替的话,在button位置最终就会出现a标签而不是button标签,破坏了页面结构。且如果你想点击之后,隔3秒再跳转,<router-link>也不能实现,它是一点击就直接跳转。

1.this.$router.push({ })    和  this.$router.replace({})

可以实现:点击button等非a标签(<router-link>最终转换为a标签)也能跳转,或者写在定时器里面延迟跳转。

<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>

 

 2.this.$router.back()    和   this.$router.forward()   

点击按钮,可以实现 浏览器历史浏览页面的前进和后退(前一个页面和后一个页面)

3.this.$router.go()

 

猜你喜欢

转载自blog.csdn.net/weixin_47075145/article/details/127308264