vue - 页面跳转
HTML:a
小程序:navigator
Vue:router-link
1. router-link => a标签
2. javascript标签跳转页面
2.1
2.2
3. 常用方法之跳上一页/下一页
3.1
3.2
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<router-link to="/">[跳转到主页]</router-link>
<router-link to="/login">[登录]</router-link>
<router-link to="/logout">[登出]</router-link> <!-- javascript跳转页面 -->
<button @click="goHome">[跳转到主页]</button> <!-- 回到上一页 -->
<button @click="upPage">[上一页]</button>
<button @click="downPage">[下一页]</button> <!-- 回到下一页 --> </div>
</template> <script>
export default {
name: "App",
methods: {
// 跳转页面方法
goHome() {
this.$router.push("/");
},
upPage() {
// 后退一步记录,等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1);
}
}
};
</script> <style lang='scss' type='text/css'>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #f00;
margin-top: 60px;
img {
// width: 200px;
height: 100px;
}
}
</style>
vue - 页面跳转的更多相关文章
- Vue页面跳转动画效果实现
Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d
- vue页面跳转以及传参和取参
vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值 this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...
- VUE页面跳转方式
一.to +跳转路径 <router-link to="/">跳转到主页</router-link> <router-link :to="{ ...
- 生产环境,vue页面跳转的时候,js报404的问题
最近上线的一个vue项目,需要各种路由跳转,在开发和测试环境都没问题,但是在生产环境,发现后期更新代码的时候,有些机型(ios机型,暂未发现android有问题)跳转路由的时候,标题修改了,但是内容并 ...
- Vue页面跳转$router.push 的用法
vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...
- vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...
- vue页面跳转拦截器
登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管 ...
- vue 页面跳转的两种方式
1,标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...
- vue:页面跳转和传参(页面之间,父传子,子传父)
1.返回上一个页面: A.<a @click="$router.back(-1)" class="btn">重新加载</a> B.thi ...
随机推荐
- Vue 2.0学习(二)数据绑定
Vue实例对象 创建一个vue应用很简单,通过构造函数Vue就能创建一个Vue的根实例: var app = new Vue({ el: '#app', data: { message: 'Hello ...
- Hibernate 基于外键的双向一对一关联映射
之前简单介绍了基于外键的单项一对一的关联映射关系,本文简单介绍基于外键的双向一对一的关联映射. 1.设计表结构 表结构对于双向一对一来说没有多少改变,只是双向都可以获取到对方. 2.创建Person对 ...
- The 2016 ACMICPC Asia Beijing Regional Contest
A. Harmonic Matrix Counter (3/19) B. Binary Tree (1/14) C. Asa's Chess Problem (21/65) [ Problem ] 给 ...
- hdu 3586 树形dp+二分
题目大意:给定n个敌方据点,1为司令部,其他点各有一条边相连构成一棵 树,每条边都有一个权值cost表示破坏这条边的费用,叶子节点为前线.现要切断前线和司令部的联系,每次切断边的费用不能超过上限lim ...
- USACO 2017 FEB Platinum nocross DP
题目大意 上下有两个长度为n.位置对应的序列A.B,其中数的范围均为1~n.若abs(A[i]-B[j]) <= 4,则A[i]与B[j]间可以连一条边.现要求在边与边不相交的情况下的最大的连边 ...
- hdu 5204 Rikka with sequence 智商不够系列
Rikka with sequence Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.p ...
- hihocoder155周 任务分配
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定 N 项任务的起至时间( S1, E1 ), ( S2, E2 ), ..., ( SN, EN ), 计算最少需要多 ...
- mybatis源码分析(6)-----核心调度对象StatmentHandler
写在前面 通过上一偏文章,我们知道:mybatis 的插件开发,主要是集中在Executor(执行器),ParameterHandler(参数处理器),ResultSetHandler(结果集处理器) ...
- centos安装pcre
安装pcre前需要已安装gcc工具 1.跳转下载目录 cd install-file 2.下载pcre wget ftp://ftp.csx.cam.ac.uk/pub/software/progra ...
- Go语言设计模式实践:组合(Composite)
关于本系列 这个系列首先是关于Go语言实践的.在项目中实际使用Go语言也有段时间了,一个体会就是不论是官方文档.图书还是网络资料,关于Go语言惯用法(idiom)的介绍都比较少,基本只能靠看标准库源代 ...