美文网首页
vue2.0 编程式导航

vue2.0 编程式导航

作者: Joe_Somebody | 来源:发表于2017-08-09 11:26 被阅读0次
    html js

    router.push(location)

    想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。 当你点击 <router-link>
    时,这个方法会在内部调用,所以说,点击<router-link :to="...">
    等同于调用router.push(…)。这样我们想要路由跳转到指定页面是,就可以在js中用这个方法,这个方法的参数可以是一个字符串路径,或者一个描述地址的对象。例如:
    router.push({ name: 'user', params: { userId: 123 }})

    声明式:<router-link :to="...">
    编程式:router.push(...)

    router.replace(location)

    router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。 声明式:<router-link :to="..." replace>
    编程式:router.replace(...)

    router.go(n)

    这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。正数表示前进,负数表示后退。所以我这里让路由返回用了this.$router.go(-1)
    为什么不用push或者replace呢? 是因为当我修改完了之后,路由自动跳转回去,但是这时用户再手动返回一次,就会出现很不好的体验,push是会返回上个信息修改页面,replace是会返回到修改信息的上一层级页面,因为当前层级已经被代替掉了。

    相关文章

      网友评论

          本文标题:vue2.0 编程式导航

          本文链接:https://www.haomeiwen.com/subject/ygmfrxtx.html