我们知道在 vue 里进行页面跳转的话, 我们使用 < router-link > 这个标签, 那在构造函数里我们不能直接操纵 DOM 元素, 我们又该如何进行页面跳转呢? Let's go!
0f0719edc7593ae476c578d99f9167a6.jpg
如果在构造函数里设置页面跳转, 需要以下两个步骤:
第一步骤: 在 DOM 里添加触发元素
我们先在 DOM 里设置三个按钮, 分别是 "后退","前进","跳转任一页".
- <button class="button" @click="goback">
- 后退
- </button>
- <button class="button" @click="forwards">
- 前进
- </button>
- <button class="button" @click="goto">
- 跳转任一页
- </button>
第二步骤: 在构造函数里操纵它们
当选择 "后退" 按钮, 页面会跳转到前一页; 当选择 "前进" 按钮, 页面会跳转到后一页; 当选择 "跳转任一页" 按钮, 页面会跳转到跳转任一页. 除了最后一个跳转任一页之外, 其余两个按钮都需要有历史痕迹才可以跳转的. 方法当然要写在 methods 里:
- methods: {
- goback() {
- this.$router.go(-1)
- },
- forwards() {
- this.$router.go(1)
- },
- goto () {
- this.$router.push("/about")
- }
- }
timg43.jpg
PS: 需要注意的点是:
在构造函数里操纵路由, 一定要写 "不要落掉" 后退 "," 向前 "的方法是 go 方法, 后退的参数是"-1", 向前的参数是"1".
this.$router.go(-1) 有些类似 JavaScript 中的 history.go(-1);
this.$router.go(1) 类似于 Windows.history.forward()
跳转任一页的方法是 push 方法, 其参数是 router.JS 里配置的路径, 这种方法有些区别于以
上两个方法. this.$router.push("/about") 类似于 JavaScript 中的.
Windows.history.go("/about")
就到这里了, 休息休息一会儿吧:) 明天继续加油噢!
来源: http://www.jianshu.com/p/e197d97ace58