vue跳转后不需要在history 栈添加一个新的记录情况

有时候，我们的路由跳转不能记录history，否则有可能导致用户点击返回按钮时，返回到我们不希望再看到的页面。

1.实现方法

a.使用router-link标签时去掉历史记录：加上replace属性

<router-link to='/XXX' replace tag="a">列表页</router-link>

b.使用this.$router.push标签时去掉历史记录：加上replace属性，默认值为false

this.$router.push({path: '/XXX',replace:true})

c.使用this.$router.replace标签时去掉历史记录

this.$router.replace({path: '/XXX'})

2.使用场景 

a.未登录时，跳转登录页，登录后访问某个页面的场景 

路径：dashboard -> login -> page1-> 点击返回按钮-> dashboard

介绍：用户在首页，未登录，想要点击需要登录的页面，跳转登/dashboard录页，登录成功后，重定向至想要查看页，然后在点击返回按钮时，不应该返回登录页，而是直接返回首页。

这种情况虽然可以通过路由拦截等手段返回至首页，但是直接使用以上方法更简单快捷。

图示: dashboard 页

跳转 page1，发现未登录，跳转至登录页。

 登录成功后，直接进入page1

此时，用户在点击返回按钮时，应该返回首页而不是登录页。

b.首页跳转不同页时

home -> page1 -> page2 -> home -> 点击返回按钮 -> 

        1.PC，停留在home

        2.移动端->返回至手机桌面

图示：

1.PC

首页 -> page1

page1->page2 ​​

 返回首页

 此时，用户在点击返回按钮时，应该停留在首页而不是返回page2。

2.移动端

 

当用户不断的从首页跳转至不同的列表页时，当用户点击返回按钮，此时就会发生列表页跳转至首页，然后再跳转至上一个列表页，而不是停留在首页，或移动端返回桌面的情况，这时候我们使用路由替换，当返回至首页时，由于history栈中并没有存储历史路由信息，我们再点击返回按钮时，PC端不会有反应，而移动端会返回至桌面，而不是接着跳转至列表页，这样结合设计路由比较符合正常逻辑。