实现跳转页面并且隐藏地址栏的参数

本文介绍了一种通过使用JavaScript和JQuery动态创建表单并提交,从而实现页面跳转时隐藏URL参数的方法。此方法适用于需要避免URL参数暴露的场景。

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

每次点击页面的按钮时,使用window.location.href=“”时跳转页面地址栏都有参数信息。那么怎么样才能隐藏地址栏参数呢?首先必须自己动态创建一个表单,将表单method改为post,提交这个表单就ok了。

// ===============JavaScript===================== 
function postToPage() {
        var f=document.createElement('form');
        f.style.display='none';
        f.action='XXX.do';
        f.method='post';
        f.innerHTML='<input type="hidden" name="mail" value="'+$("#email").val()+'"/>';
        document.body.appendChild(f);
        f.submit();
    }

// ===============JQuery=====================
function postToPage() {
    var form = $("<form>");
    form.attr("style","display:none");
    form.attr("target","");
    form.attr("method","post");
    //请求地址
    form.attr("action","XXX.do");
    var input1 = $("<input>");
    input1.attr("type","hidden");
    input1.attr("name","path");
    input1.attr("value",uploadPath);
    $("body").append(form);
    form.append(input1);
    form.submit();
    form.remove();
}

 

### Vue3 中路由跳转传参的方法 在 Vue3 中,可以通过 `vue-router` 提供的功能实现路由跳转并传递参数。以下是几种常见的传参方式及其具体实现: #### 1. 使用 Query 参数 Query 参数是一种简单的方式,在 URL 中以键值对的形式附加数据。 ```javascript // 导入 useRouter 和 useRoute import { useRouter, useRoute } from 'vue-router'; const router = useRouter(); const route = useRoute(); function navigateWithQuery() { // 跳转到目标页面,并携带查询参数 router.push({ path: '/targetPage', query: { id: 123, name: 'example' } }); } // 接收参数 const queryParams = route.query; console.log(queryParams.id, queryParams.name); ``` 这种方式会在地址栏显示完整的参数列表[^2]。 --- #### 2. 使用 Params 参数 Params 参数不会直接暴露在 URL 的查询部分,而是嵌套在路径中。这通常用于动态路由场景。 ##### 定义动态路由 首先需要在路由配置中设置动态路径占位符。 ```javascript const routes = [ { path: '/user/:id', // 动态参数 :id name: 'User', component: () => import('@/views/User.vue') } ]; ``` ##### 发起带 Params 的跳转 可以使用对象形式指定 `name` 和 `params` 属性来完成跳转。 ```javascript function navigateWithParams() { router.push({ name: 'User', params: { id: 456 } }); } ``` 如果未提供 `name`,也可以通过拼接路径字符串实现跳转。 ```javascript router.push('/user/789'); ``` ##### 获取 Params 参数 在目标组件中可通过 `useRoute()` 来获取这些参数。 ```javascript const userId = route.params.id; console.log(userId); // 输出:456 或者 789 ``` 注意:当使用 `params` 方式时,URL 不会自动更新为带有查询字符串的样式[^3]。 --- #### 3. 使用 State 进行跨页通信 除了传统的 URL 参数外,还可以利用导航守卫中的状态管理功能共享临时数据。 ```javascript // 设置 state 数据 router.push({ path: '/anotherPage', state: { message: 'Hello from previous page!' } }); // 在新页面读取 state window.onpopstate = function(event) { console.log(event.state.message); // Hello from previous page! }; ``` 此方法适用于简单的单次交互需求,但不适合长期存储或复杂逻辑处理[^1]。 --- ### 总结 以上介绍了三种主要的 Vue3 路由跳转传参方式——基于 Query、Params 和 State。开发者应根据实际业务需求选择合适的方案。例如,对于公开可见的数据推荐采用 Query;而敏感信息则更适合隐藏于 Params 或借助 Vuex 等全局状态管理系统统一维护。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值