当前位置: 首页 > Web前端 > vue.js

vue获取url参数,并将属性直接写入对象并自动转换为url

时间:2023-03-31 15:03:43 vue.js

import{reactive,computed}from"vue";/**返回一个params对象和计算出来的href字符串,href依赖于params*@example*```js*const[AppOptions,href]=useParamsObj(undefined,{});*//将根据AppOptions计算的href设置为history*watchEffect(()=>history.replaceState("","",href.value));*```*/exportfunctionuseParamsObj(urlStr=document.location.toString(),defaultParams:T){consturl=newURL(urlStr);constsearchParams=url.searchParams;constparams=reactive(defaultParams);searchParams.forEach((v,k)=>{try{(paramsasany)[k]=atob(v);}catch(error){//兼容直接输入case(paramsasany)[k]=v;}});consthref=computed(()=>{Object.keys(params).forEach((k)=>{constv=btoa((paramsasany)[k]||"");searchParams.set(k,v);});返回url.href;});return[params,href]asconst;}使用示例