项目路由跳转在轻H5项目中,几乎每个页面都有返回之类的按钮,经常路由跳转不当将会导致页面出现返回进入死循环,一直返回不了,甚至退出不了应用这种情况,下面就是解决问题的一些总结:
**Vue 中 this.route 的区别 **
通过注入路由器,我们可以在任何组件内通过 this.route 访问当前路由。可以理解为:
this.$router 相当于一个全局的路由器对象,包含了很多属性和对象(比如 history 对象),任何页面都可以调用其 push(), replace(), go() 等方法。
this.$route 表示当前路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name, path, params, query 等属性。
然后我们再区分vue中路由跳转 this.$router.push、replace、go 的区别
1,this.$router.push 跳转到指定URL,向history栈添加一个新的记录,点击后退会返回至上一个页面
2,this.$router.replace 跳转到指定URL,替换history栈中最后一个记录,点击后退会返回至上上一个页面 使用:同push
3,this.$router.go(n) 类似window.history.go(n),向前或向后跳转n个页面,n可正(先后跳转)可负(向前跳转) 搞清楚这三者的关系之后路由跳转的设置使用就会清晰很多,根据自己页面跳转的实际情况,来选择合适的跳转方法,将会解决很多跳转回退后的问题。
例如:如果我们进入一个页面,想要返回的时候返回当前页面,使用this.$router.push,
如果我们想要点击返回不返回上一个页面(当前页面),我们就使用 this.$router.replace,
而我们需要回退到上面的第几个页面,我们就可以使用this.$router.go(n),将n设置为负数即可。