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 ...
随机推荐
- 【BZOJ 3242】 (环套树、线段树+树形DP?)
3242: [Noi2013]快餐店 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 728 Solved: 390 Description 小T打算 ...
- 51nod1203 JZPLCM 线段树 + 扫描线
不算很难的一道题 原题的数据虽然很小,但是我们不能欺负它,我们就要当$S[i] \leqslant 10^9$来做这题 最小公倍数 = 所有的质因数取可能的最大幂相乘 对于$> \sqrt S$ ...
- [BZOJ2427][HAOI2010]软件安装(Tarjan+DP)
2427: [HAOI2010]软件安装 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1987 Solved: 791[Submit][Statu ...
- POJ 3974 Palindrome 字符串 Manacher算法
http://poj.org/problem?id=3974 模板题,Manacher算法主要利用了已匹配回文串的对称性,对前面已匹配的回文串进行利用,使时间复杂度从O(n^2)变为O(n). htt ...
- 压测工具Webbench
webbench最多可以模拟3万个并发连接去测试网站的负载能力,安装使用也特别方便,并且非常小. 1.系统:Linux 2.编译安装: [root@~]$wget http://blog.s135.c ...
- python开发_IDEL(Python GUI)的使用方法
在这篇blog"Python开发_python的安装"里面你会了解到python的安装. 安装后,我们希望能够运用python GUI来运行一些我们编写的程序,那么Python G ...
- 编程经验(C#)
本文记录我在编程里学到的一些小技巧,遇到了就记录一下. 1.如果通用接口中的回调没有参数,而调用时需要参数,这个时候可以用匿名函数多封装一层.例如: Private void Main() { Fun ...
- 原来通过修改dns加快app store下载速度的确有效
说来惭愧,这几天休假,并没有做什么技术上的修行.小伙伴推荐我一款avg游戏<11eyes 罪与罚与被诅咒的少女>,说是神作.但是app store上卖rmb118元,起初并没有什么兴趣去购 ...
- php图片上传检测是否为真实图片格式
PHP 图片上传,如果不做任何判断的话,随便一个文件如 rar,zip,php,java等文件改个文件名,改个后缀就能以图片形式上传的服务器,往往会造成极大的危害! 工具/原料 PHP apach ...
- 介紹 IIS 8 全新的 HttpPlatformHandler 模組與 ASP.NET 5 Beta8 重大變更
HttpPlatformHandler 是一個支援 IIS 8 與 IIS 8.5 的原生模組 (native module),主要使用於 Microsoft Azure Websites 網站服務中 ...