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 - 页面跳转的更多相关文章

  1. Vue页面跳转动画效果实现

    Vue页面跳转动画效果实现:https://juejin.im/post/5ba358a56fb9a05d2068401d

  2. vue页面跳转以及传参和取参

    vue中this.$router.push()路由传值和获取的两种常见方法 1.路由传值   this.$router.push() (1) 想要导航到不同的URL,使用router.push()方法 ...

  3. VUE页面跳转方式

    一.to +跳转路径 <router-link to="/">跳转到主页</router-link> <router-link :to="{ ...

  4. 生产环境,vue页面跳转的时候,js报404的问题

    最近上线的一个vue项目,需要各种路由跳转,在开发和测试环境都没问题,但是在生产环境,发现后期更新代码的时候,有些机型(ios机型,暂未发现android有问题)跳转路由的时候,标题修改了,但是内容并 ...

  5. Vue页面跳转$router.push 的用法

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon&qu ...

  6. vue 页面跳转传参

    页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样 需要操作的是路由history,需要用到 V ...

  7. vue页面跳转拦截器

    登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管 ...

  8. vue 页面跳转的两种方式

    1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...

  9. vue:页面跳转和传参(页面之间,父传子,子传父)

    1.返回上一个页面: A.<a @click="$router.back(-1)" class="btn">重新加载</a> B.thi ...

随机推荐

  1. 【BZOJ 3242】 (环套树、线段树+树形DP?)

    3242: [Noi2013]快餐店 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 728  Solved: 390 Description 小T打算 ...

  2. 51nod1203 JZPLCM 线段树 + 扫描线

    不算很难的一道题 原题的数据虽然很小,但是我们不能欺负它,我们就要当$S[i] \leqslant 10^9$来做这题 最小公倍数 = 所有的质因数取可能的最大幂相乘 对于$> \sqrt S$ ...

  3. [BZOJ2427][HAOI2010]软件安装(Tarjan+DP)

    2427: [HAOI2010]软件安装 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1987  Solved: 791[Submit][Statu ...

  4. POJ 3974 Palindrome 字符串 Manacher算法

    http://poj.org/problem?id=3974 模板题,Manacher算法主要利用了已匹配回文串的对称性,对前面已匹配的回文串进行利用,使时间复杂度从O(n^2)变为O(n). htt ...

  5. 压测工具Webbench

    webbench最多可以模拟3万个并发连接去测试网站的负载能力,安装使用也特别方便,并且非常小. 1.系统:Linux 2.编译安装: [root@~]$wget http://blog.s135.c ...

  6. python开发_IDEL(Python GUI)的使用方法

    在这篇blog"Python开发_python的安装"里面你会了解到python的安装. 安装后,我们希望能够运用python GUI来运行一些我们编写的程序,那么Python G ...

  7. 编程经验(C#)

    本文记录我在编程里学到的一些小技巧,遇到了就记录一下. 1.如果通用接口中的回调没有参数,而调用时需要参数,这个时候可以用匿名函数多封装一层.例如: Private void Main() { Fun ...

  8. 原来通过修改dns加快app store下载速度的确有效

    说来惭愧,这几天休假,并没有做什么技术上的修行.小伙伴推荐我一款avg游戏<11eyes 罪与罚与被诅咒的少女>,说是神作.但是app store上卖rmb118元,起初并没有什么兴趣去购 ...

  9. php图片上传检测是否为真实图片格式

    PHP 图片上传,如果不做任何判断的话,随便一个文件如 rar,zip,php,java等文件改个文件名,改个后缀就能以图片形式上传的服务器,往往会造成极大的危害! 工具/原料   PHP apach ...

  10. 介紹 IIS 8 全新的 HttpPlatformHandler 模組與 ASP.NET 5 Beta8 重大變更

    HttpPlatformHandler 是一個支援 IIS 8 與 IIS 8.5 的原生模組 (native module),主要使用於 Microsoft Azure Websites 網站服務中 ...