HTML+JSVUE页面跳转的几种方式总结
Posted AC_meimei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+JSVUE页面跳转的几种方式总结相关的知识，希望对你有一定的参考价值。
一、html+JS实现跳转:
特别提醒：有些跳转方式是只能跳转一级页面，有些可以跳转多级页面，在使用时要注意选择跳转方式！
1、javascript中实现跳转：
// 直接跳转
window.location.href='index.html';
// 定时跳转
setTimeout("javascript:location.href='index.html'", 5000);
2、在html标签内实现跳转：
eg:onclick='window.location.href='../index.html'; οnclick="window.location.reload('../index.html');
<button id="load" οnclick="window.location.reload('../index.html')">跳转</button>
3、html中的 a标签直接跳转：
<a href="http://baidu.com">百度一下</a>
4、html中使用meta中跳转，通过meta可以设置跳转时间和页面:
eg:<meta http-equiv="refresh" content="5";url="index.html">
<head>
<!--只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="5">
<!--定时转到其他页面 -->
<meta http-equiv="refresh" content="5";url="index.html">
</head>
5、html中跳转上一页的方式：
eg:window.history.go(-1)；或者 window.history.back(-1);
<a href="#" onClick="javascript :history.back(1);">返回上一页</a>
<a href="#" onClick="javascript :history.go(-1);">返回上一页</a>
6、javascript中写跳转上一页：
<div id="btn">按钮</div>
<script type="text/javascript">
var wrong = document.getElementById('btn');
wrong.onclick = function()
window.history.go(-1);//返回上一页
window.history.back(-1);//返回上一页
</script>
二、VUE实现跳转:
1、通过 @click='方法名' 跳转：
<template>
<text @click="goHome"><u-icon name="arrow-left"></u-icon></text>
</template>
<script>
methods:
// 方式一：点击返回首页
goHome()
this.$router.replace('../home/home');
,
// 方式二：点击返回首页
goHome()
uni.switchTab(
url: '../home/home'
)
,
// 方式三：点击返回首页
goHome()
// 直接跳转
this.$router.push('../home/home');
// 带参数跳转
this.$router.push(path:'../home/home',query:setid:123456);
,
</script>
2、通过 @tap='方法名' 跳转：
<template>
<text @tap="goHome"><u-icon name="arrow-left"></u-icon></text>
</template>
<script>
methods:
// 方式一：点击返回首页
goHome()
uni.navigateTo(
url:'../home/home'
)
,
</script>
3、router-link跳转：
直接跳转：
<router-link to='./home'>
<button>点击跳转1</button>
<router-link to='/testDemo'>
带参数跳转：
<router-link :to="path:'./home',query:setid:123456">
<button>点击跳转2</button>
</router-link>
希望有帮助~大家还知道哪些跳转方式可以下方评论哦！
以上是关于HTML+JSVUE页面跳转的几种方式总结的主要内容，如果未能解决你的问题，请参考以下文章