vue--js里跳转页面
我们知道在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里跳转页面的更多相关文章
- Vue.js刷新当前页面
Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...
- vue.js在html页面中的使用
1.加载vue.js,然后 var app = new Vue({ //vue代码})2.截图如下:
- Vue.js如何在一个页面调用另一个同级页面的方法
使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: 需要在展示页里调用顶部导航栏页里的方法,两者之间没有引用关 ...
- webpack配合vue.js实现完整的单页面demo
本篇文章主要是我在开发前研究了webpack+vue.js的单页面应用,因为需要用到node的npm,所以确保安装了node,建议官网安装最新的稳定版本.并且在项目中需要加载一些npm包,由于npm的 ...
- Vue.js实例练习
最近学习Vue.js感觉跟不上节奏了,Vue.js用起来很方便. 主要实现功能,能添加书的内容和删除.(用的Bootstrap的样式)demo链接 标题用了自定义组件,代码如下: components ...
- Vue.js—快速入门
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
- 一款很便捷很实用的框架——vue.js
Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...
- 一天带你入门到放弃vue.js(一)
写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...
- onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Vue.js—快速入门及实现用户信息的增删
Vue.js是什么 Vue.js 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目 ...
随机推荐
- 70个Python练手项目列表(都有完整教程)
前言: 不管学习那门语言都希望能做出实际的东西来,这个实际的东西当然就是项目啦,不用多说大家都知道学编程语言一定要做项目才行. 这里整理了70个Python实战项目列表,都有完整且详细的教程,你可以从 ...
- shell脚本报错:syntax error: unexpected end of file
解决办法1: vi test.sh :set fileformat=unix :wq 解决办法2: yum install dos2unix dos2unix my.sh 原因剖析: DOS下文件和L ...
- h5样式布局
在文字的左面加图标 background: url(../images/hi.png) left no-repeat; 如图所示
- RSA公私钥获取模数和质数
实际项目中,发现前端在生成公钥对象的时候并不是使用这种方式,而是通过对应的模数跟质数来构造公钥对象的,这样的话,需要进一步将生成的公钥取出对应的模数和质数.openssl.java api都可以将质数 ...
- HDFS之HA
HDFS高可用环境HA的架构 HDFS组件由一个对外提供服务的namenode(存储元数据)和N个datanode组成:Zookeeper有三个作用:1.为了统一配置文件 config 2.多个节点的 ...
- UIManager
创建UIManager,管理所有UI面板 准备工作: 1. 创建Canvas并设置Tag为Main Canvas 2. 在Canvas下新建五个层级节点,因为UGUI显示层级越往下越靠前 using ...
- python小程序--Three(三级菜单)
#!/usr/bin/env python # _*_ coding:utf8 _*_ data = { "山东省":{ "滨州市":{"惠民县&qu ...
- 获取上一行记录lag
SELECT EMPLID ,EFFDT ,END_DT ,COMPANY ,DEPTID ,POSITION_NBR ,' ' ,' ' FROM ( SELECT J1.EMPLID ,J1.EF ...
- NOT EXIST和NOT IN 和MINUS的用法
MINUS SELECT count(id) FROM householdstaffs s WHERE s.idcardno in( SELECT h.idcardno FROM households ...
- 接口自动化测试持续集成--Soapui接口功能测试数据传递
做接口测试经常会遇到如下两种情况需要处理数据传递 接口间的数据依赖,A接口请求的参数需要用到B接口的返回值 接口请求通常要用到鉴权的接口获取Token,Token通常会跟其他接口构成一对多的关系,这种 ...