我们知道在vue里进行页面跳转的话,我们使用<router-link>这个标签

那在构造函数里我们不能直接操纵DOM元素,我们又该如何进行页面跳转呢?

步骤1:

我们先在DOM里设置三个按钮,分别是“后退”,“前进”,“跳转任一页”。

<button @click="goback">后退</button>
<button @click="forwards">前进</button>
<button @click="goto">跳转任一页</button>

接下来就是在构造函数里操纵它们

当选择“后退”按钮,页面会跳转到前一页

当选择“前进”按钮,页面会跳转到后一页

当选择“跳转任一页”按钮,页面会跳转到跳转任一页

除了最后一个跳转任一页之外,其余两个按钮都需要有历史痕迹才可以跳转的

方法当然要写在methods里:

methods: {
goback() {
this.$router.go(-)
},
forwards() {
this.$router.go()
},
goto() {
this.$router.push("/about")
}
}

vue--js里跳转页面的更多相关文章

  1. Vue.js刷新当前页面

    Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...

  2. vue.js在html页面中的使用

    1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:

  3. Vue.js如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关 ...

  4. webpack配合vue.js实现完整的单页面demo

    本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...

  5. Vue.js实例练习

    最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...

  6. Vue.js—快速入门

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

  7. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

  8. 一天带你入门到放弃vue.js(一)

    写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...

  9. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  10. Vue.js—快速入门及实现用户信息的增删

    Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...

随机推荐

  1. 运维面试题之linux基础

    吐槽: 某某命令是什么,某个配置文件的路径,呃....你难道不知道有--help和Tab这种东西吗? linux系统的启动过程是怎么样的? grub引导>加载内核>启动init进程依据in ...

  2. ==还款-代偿(csv循环自动代偿)

    问题: 解决:传递参数错误,上一步就错了 问题:代偿返回这些信息 解决:传递参数错误,应该为${repayWay1},但是一直写的是${repayWay} 问题:如何从csv文件中逐条取项目编号,进行 ...

  3. ElasticSearch 随笔

     1.如何用亚马逊S3存储一个ES服务索引.http://t.cn/R0fAJwK 2.ELK实战 - 利用Nginx日志分析API耗时.http://t.cn/R6sgQfU 3.Kibana中的地 ...

  4. 68.jq---tab选项实现网页定点切换

    {volist name="list" id="vo"}<div class="nav_div" style="positi ...

  5. 用php实现斐波那契数列,如: 1, 1, 2, 3, 5, 8, 13, 21, 34。用数组求出第20个数的值。

    <?php //用数组 function fib($n){ $array = array(); $array[0] = 1; $array[1] = 1; for($i=2;$i<$n;$ ...

  6. #WEB安全基础 : HTTP协议 | 0x16 HTTPS:加密的秘密

    公开秘钥加密&&共享秘钥加密 这两个冗长的短语,让我拿什么理解? 我们知道HTTPS有加密功能,以上的两个短语很常用.先摆在这,接下来开始尝试理解它们. 共享秘钥加密(对称秘钥加密): ...

  7. IDEA 破解_补丁永久_2018.3

           主要是Eclipse我已经玩坏了三次了,切换jdk8到jdk10,再切换到jdk8,大量文件乱码,怎么改都没用,有的时候Eclipse久了不用,项目放在里面发霉了,坏掉了,MMP,换到I ...

  8. 利用Openssh后门 劫持root密码

    Linux操作系统的密码较难获取.而很多Linux服务器都配置了Openssh服务,在获取root权限的情况下, 可以通过修改或者更新OpenSSH代码等方法,截取并保存其SSH登录账号密码,甚至可以 ...

  9. Yii2.0 上使用 redis

    1. 通过composer进行安装,到项目根目录cmd运行 php composer.phar require --prefer-dist yiisoft/yii2-redis或者添加 "y ...

  10. hdu 2838 Cow Sorting

    题意: 给出一个数组,要求把他们排成升序,两个数字交换的代价是x + y,求代价的总和. 思路: 简单的逆序对变形,树状数组维护小于的cnt和sum即可. 代码: #include <stdio ...