html+jsvue页面跳转的几种方式总结(代码片段)

AC_meimei AC_meimei     2023-03-24     165

关键词:

一、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>

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

html5页面跳转的几种方法(代码片段)

1.定时跳转或者原地刷新对于刷新当前页面js控制为:window.location.reload();//刷新当前页面,重新向服务器请求数据head标签内部的meta标签方式,定时刷新当前界面或刷新到另一个页面:<metacharset="utf-8"http-... 查看详情

javascript实现页面跳转的几种方式

Javascript实现页面跳转的几种方式概述  相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿... 查看详情

jquerymobile页面跳转切换的几种方式

...来也是相当的easy。所以这一片文章就是介绍jQueryMobile的页面跳转的。少说废话,看源代码:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transi 查看详情

实现前端页面跳转的几种方式

实现前端页面跳转的几种方式推荐使用<scriptlanguage=‘javascript‘>document.location=‘http://mail.qq.com/domain/longtimenosee.cc‘</script>相关阅读http://www.jb51.net/article/25403.htmhttp://my.oschina.net/ososchi 查看详情

js实现页面跳转的几种方式

第一种:<scriptlanguage="javascript" type="text/javascript">  window.location.href="login.php?backurl="+window.location.href;</script> 第二种:<scriptlanguage="javascript">  alert( 查看详情

javascript实现页面跳转的几种方式

...sp;相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一下。 第一种:直接跳转... 查看详情

javascript实现页面跳转的几种方式

...sp;相信很多Web开发者都知道,在开发Web程序的时候,对于页面之间的跳转,有很多种,但是有效的跳转则事半功倍,下面就是我在平时的开发过程中所用到的一些JavaScript跳转方式,拿出和大家共享一下。 第一种:直接跳转... 查看详情

js实现页面跳转的几种方式

第一种:    <scriptlanguage="javascript"type="text/javascript">               window.location.href="xx. 查看详情

页面跳转的几种方式

第一种:   <scriptlanguage="javascript">          window.location.href="index.php";        &n 查看详情

uniapp页面跳转的几种方式(代码片段)

uniapp页面跳转的几种方式一、uni.navigateTo定义:保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。使用://1.不传参uni.navigateTo(url:'./home/index');//2.传参字符串uni.navigateTo(url:`./ho... 查看详情

设置域名跳转的几种方式(代码片段)

背景:本文以ubuntu服务器为例来说明几种设置域名跳转的情况设置域名301跳转的几种途径:1、域名解析处设置显性URL比如解析处可设置a.com显性解析到b.com 2、nginx配置文件处跳转。a、proxy跳转/etc/nginx/conf.d下面设置跳转serverli... 查看详情

实现跳转的几种法式

...意义。跳转就是当我们点击按钮或者实现某个活动从一个页面到另一个页面,那么我就来介绍几种跳转的法式。 第一种跳转方式-----Storyboard中segues(拉线):              &nb... 查看详情

js页面跳转常用的几种方式(转)

js页面跳转常用的几种方式转载  2010-11-25 作者:   我要评论js实现页面跳转的几种方式,需要的朋友可以参考下。第一种: 复制代码代码如下:<scriptlanguage="javascript"type="text/javascript"> window.location... 查看详情

uniapp页面跳转的几种方法和区别(代码片段)

在讲它们的差异之前,我们先引入一个概念:页面栈1.栈是一种连续储存的数据结构,具有先进后出的性质。2.页面栈就是用来储存页面的栈,也有栈的特性。uniapp是通过页面栈来管理所有的页面,我们可以将... 查看详情

页面跳转的几种方法

PHP <?php//302重定向$url="http://www.cnblogs.com/mengor";header("Location:$url");//301重定向$url="http://www.cnblogs.com/mengor";header("HTTP/1.1301MovedPermanently");header("Location:$url"); m 查看详情

vue-路由跳转的几种方式和路由重定向(代码片段)

一、标签路由router-link 注意:router-link中链接如果是‘/‘开始就是从根路由开始,如果开始不带‘/‘,则从当前路由开始。1、不传参 <router-link:to="name:‘Home‘"> <router-link:to="path:‘/home‘">2、传参  <router-link:... 查看详情

网页中转跳转的几种方式

   最近在做一个网站,遇到一个问题,在首页访问的时候要先经过action,拿出数据,我开始想在web.xml里的<welcome-file>中直接配置action,试了下不行,在网上查了资料,的确不行,只能用中转方式,而中转方式也有... 查看详情

web前端-vue路由跳转的几种方式及参数获取router-link;this.$router.push()(代码片段)

...参$route.params.id,script取参this.$route.params.id,刷新页面参数消失;2) 查看详情