一个页面通过url行另个一个页面传参

本文详细介绍了如何在HTML页面间通过URL传递参数,并在目标页面上解析这些参数。包括使用JavaScript进行页面跳转并附带参数,以及在目标页面中通过jQuery和原生JavaScript获取URL中的参数值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.第一个页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a页面 </title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        function to(){
            var getval ="valueTest";
            window.location.href="b.html?valus="+getval;
        }
    </script>

</head>
<body>
<button onclick="to()">传值</button>
</body>
</html>

2.第二个页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>b页面 </title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function(){
//console.log(location.search.concat());
//manyValues();
            $("#show").html(oneValues());
            //直接在初始化函数里面获取url,直接获取第一个地址,而不是传递过来的地址,因此,使用方法获取url可以防止传递参数加载到页面是出错
        })

        //接收一个值
        function oneValues(){
            var result;
            var url=window.location.search; //获取url中"?"符后的字串
            console.log(url);
            if(url.indexOf("?")!=-1){
                result = url.substr(url.indexOf("=")+1);
            }
            return result;
        }


        //接收多值
        function manyValues(){
            var url=window.location.search;
            if(url.indexOf("?")!=-1){
                var str = url.substr(1);
                strs = str.split("&");
                var key=new Array(strs.length);
                var value=new Array(strs.length);
                for(i=0;i<strs.length;i++){
                    key[i]=strs[i].split("=")[0]
                    value[i]=unescape(strs[i].split("=")[1]);
                    alert(key[i]+"="+value[i]);
                }
            }
        }

    </script>
</head>
<body>
<span>接收的值是:</span>
<span id="show"></span>
</body>
</html>
### Vue3 页面之间传递参数的方法 在 Vue 3 中,页面之间的参数传递主要依赖于 `vue-router` 提供的功能。可以通过路由参数或查询参数两种方式来实现。 #### 使用路由参数 (params) 当需要在 URL 路径中嵌入动态部分时,可以使用路由参数。这通常适用于显示特定资源的数据,比如用户资料页 `/user/:id`。 1. 定义带参数的路由: ```javascript const routes = [ { path: '/product/:id', name: 'ProductDetail', component: ProductDetail, }, ]; ``` 2. 在源页面触发跳转并传参: ```javascript this.$router.push({ name: 'ProductDetail', params: { id: productId } }); ``` 3. 在目标组件接收参数: ```javascript export default { mounted() { console.log(this.$route.params.id); // 访问传递过来的产品ID } } ``` 这种方式会使URL变为类似于 `/product/123` 的形式[^1]。 #### 利用查询字符串 (query) 对于不需要改变路径结构而只是附加一些额外信息的情况,则更适合采用查询字符串的方式。例如过滤条件、分页索引等场景下非常有用。 1. 同样先配置好相应的路由规则; 2. 发起带有查询参数的导航请求: ```javascript this.$router.push({ path: '/search', query: { keyword: searchKeyword, page: currentPageIndex } }); ``` 此时浏览器地址栏将会展示形如 `/search?keyword=example&page=2` 这样的链接[^2]。 3. 获取这些查询参数可以在任何地方通过 `$route.query` 来访问: ```javascript console.log(this.$route.query.keyword); console.log(this.$route.query.page); ``` 这两种方法都可以很好地满足不同业务需求下的跨页面通信要求,在实际开发过程中可以根据具体的应用逻辑选择合适的一种或者混合使用两者。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值