HTML+JS、VUE页面跳转的几种方式总结

2023-09-26 03:59| 来源: 网络整理| 查看: 265

一、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');

跳转

3、html中的 a标签直接跳转：

百度一下

4、html中使用meta中跳转，通过meta可以设置跳转时间和页面: eg:

5、html中跳转上一页的方式： eg:window.history.go(-1)；或者 window.history.back(-1);

6、javascript中写跳转上一页：

按钮 var wrong = document.getElementById('btn'); wrong.onclick = function() { window.history.go(-1);//返回上一页 window.history.back(-1);//返回上一页 } 二、VUE实现跳转:

1、通过 @click='方法名' 跳转：

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}}); }, }

2、通过 @tap='方法名' 跳转：

methods: { // 方式一：点击返回首页 goHome(){ uni.navigateTo({ url:'../home/home' }) }, }

3、router-link跳转：

直接跳转：点击跳转1 带参数跳转：点击跳转2

希望有帮助~大家还知道哪些跳转方式可以下方评论哦！

【本文地址】

公司简介

联系我们