web编程页面的传值

html页面传值问题

在连个页面直接的传值,我们可以用简单的script脚本实现。但是在多种情况存在的条件下,我们不能只考虑简单的传值。废话不多说,

html中传值,情况如下

针对于一般情况的完整性出发代码如下:

r.js

	function sub(){
			var str=""+document.getElementById('area').value;		
			var url="b.html?a="+escape(str);
			location.href=url;	
		}

a.html 和 b.html 

</head>
<script type="text/javascript" src="r.js"></script>
<body>
<textarea name="area" id="area"></textarea>
 	<a href="####" onclick="sub()">跳转</a>
</script>
</body>


b.html

<body>
	<textarea name="area" id="area"></textarea>
	<script type="text/javascript">
	var loc = location.href;
	loc=unescape(loc);
  	var n1 = loc.length;//地址的总长度
  	var n2 = loc.indexOf("=");//取得=号的位置
	if(n2>0){
		var id = loc.substr(n2+1, n1-n2);//从=号后面的内容
		document.getElementById("area").value=id;
	}
</script>
</body>

页面a.html内传递

</head>
<script type="text/javascript" src="r.js"></script>
<body>
<textarea name="area" id="text"></textarea>
<textarea name="area" id="area"></textarea>
 	<a href="####" onclick="sub()">跳转</a>
		<script type="text/javascript">
	var loc = location.href;
	loc=unescape(loc);
  	var n1 = loc.length;//地址的总长度
  	var n2 = loc.indexOf("=");//取得=号的位置
	if(n2>0){
		var id = loc.substr(n2+1, n1-n2);//从=号后面的内容
		document.getElementById("text").value=id;
	}
</script>
</body>
 
r.js
	function sub(){
			var str=""+document.getElementById('area').value;		
			var url="b.html?a="+escape(str);
			location.href=url;	
		}




 

 

 

在 Vue.js 中实现页面之间递参数或数据,通常使用 Vue Router 来管理路由,并通过其功能来处理参数递。以下是几种常见的方法: ### 使用路由参数 在定义路由时,可以在路径中添加动态段,例如 `:id` 或 `:name`,这些参数将被捕获并作为 `$route.params` 的一部分提供给目标组件。例如,在路由配置中设置: ```javascript const routes = [ { path: '/user/:id', component: User } ] ``` 当访问 `/user/123` 时,可以通过 `this.$route.params.id` 获取到为 `'123'` 的参数[^1]。 ### 使用编程式导航 除了声明式的 `<router-link>` 标签外,还可以利用 `router.push()` 方法来进行页面跳转,并且在这个过程中携带参数。例如: ```javascript this.$router.push({ name: 'user', params: { userId: 123 }}) ``` 这里假设 `'user'` 是一个已命名的路由,并且它接受 `userId` 参数[^1]。 ### 查询参数 如果不想改变当前的路由结构,也可以通过查询参数的形式来递数据。这类似于统的 URL 查询字符串,比如 `/search?query=Vue`。这种方式不会影响路由匹配,但是参数会显示在地址栏中,适合用于过滤或者排序等场景[^1]。 ### 事件总线或 Vuex 状态管理 对于那些不直接关联的页面或者是需要保持状态的数据,可以考虑使用事件总线(Event Bus)或者是 Vuex 这样的状态管理模式。Vuex 提供了一个集中式的存储空间,使得不同组件间的数据共享变得更加简单可靠[^1]。 ### 使用 LocalStorage 或 SessionStorage 有时可能需要持久化某些数据,这时可以借助浏览器提供的 Web Storage API,如 `localStorage` 和 `sessionStorage`。它们允许你在客户端安全地保存键对信息,即使用户关闭了页面也能保留下来(仅限于 localStorage)[^1]。 以上就是在 Vue.js 应用程序中进行页面参的一些常用方法。每种方式都有自己的适用场景,开发者可以根据具体需求选择最合适的一种。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值