JS获取当前页面url传参

本文介绍了一个JavaScript函数,用于从当前页面URL中解析并获取特定的参数值。通过使用split方法,该函数能够处理URL中的查询字符串,将其转换为数组,并进一步解析出所需的参数及其对应的值。

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

JS获取当前页面url传参

function geturl(data) {    //获取当前页面路径传参
    //   var url = document.location.toString();	//获取当前页面路径,我这里在本地写的一个页面路径进行参考
    var url = 'http://www.baidu.com?id=10&sex=nam';
    //从问号之后进行切割,split将会把一个字符串转换成一个数组
    var Objs = url.split("?");
    //数组长度大于1才会执行
    if (Objs.length > 1) {
        //取数组第二位从&进行开始切割,数组index默认从0开始,因为split把字符串转换成数组,所以要取第二位,因为第二位是我们要的值
        var arr = Objs[1].split("&");
        var newarr;//建立一个新数组,用来保存我们要的值
        for (var i = 0; i < arr.length; i++) {
            //把等号后面的值丢到arr这个数组
            newarr = arr[i].split("=");
            if (newarr != null && newarr[0] == data) {
                //取第二位的值,split和上面一样的原理
                return newarr[1];
            }
        }
    }
}
console.log(geturl('id'), geturl('sex'))
在Vue 3中,获取页面传参的方式主要有以下几种: 1. **通过路由传参**: - **使用`useRoute`钩子**:在Vue 3中,`useRoute`是一个组合式API,用于获取当前路由的信息。 ```javascript import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); const id = route.params.id; // 获取路由中的id参数 const query = route.query.name; // 获取查询参数中的name return { id, query }; } }; ``` 2. **通过`props`传参**: - **在路由配置中定义`props`**:可以在路由配置中设置`props`为`true`,这样路由参数会作为组件的`props`传递。 ```javascript // router/index.js const routes = [ { path: '/:id', component: Component, props: true } ]; ``` - **在组件中接收`props`**: ```javascript export default { props: ['id'], setup(props) { const id = props.id; return { id }; } }; ``` 3. **通过`window`对象**: - **使用`window.location`**:可以通过`window.location`对象获取URL中的参数。 ```javascript export default { setup() { const id = window.location.href.split('?')[1].split('=')[1]; return { id }; } }; ``` 4. **通过`Vuex`或`Pinia`状态管理**: - **在状态管理中存储参数**:可以在路由跳转前将参数存储在状态管理中,然后在目标组件中获取。 ```javascript // store/index.js import { defineStore } from 'pinia'; export const useStore = defineStore('main', { state: () => ({ id: null }), actions: { setId(id) { this.id = id; } } }); // 路由跳转前 import { useStore } from '@/store'; const store = useStore(); store.setId(id); // 目标组件中 import { useStore } from '@/store'; export default { setup() { const store = useStore(); const id = store.id; return { id }; } }; ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值