vue 获取 url 参数，以及直接向对象写属性自动转换为 url
import { reactive, computed } from "vue";
/** 返回一个 params对象 与 href 字符串computed ,href 依赖于 params
* @example
* ```js
*const [AppOptions, href] = useParamsObj(undefined, {});
*// 将基于 AppOptions 计算得来的 href 设置到 history
*watchEffect(() => history.replaceState("", "", href.value));
* ```
*/
export function useParamsObj(
urlStr = document.location.toString(),
defaultParams: T
) {
const url = new URL(urlStr);
const searchParams = url.searchParams;
const params = reactive(defaultParams);
searchParams.forEach((v, k) => {
try {
(params as any)[k] = atob(v);
} catch (error) {
// 兼容直接输入的情况
(params as any)[k] = v;
}
});
const href = https://www.it610.com/article/computed(() => {
Object.keys(params).forEach((k) => {
const v = btoa((params as any)[k] || "");
searchParams.set(k, v);
});
return url.href;
});
return [params, href] as const;
} 【vue 获取 url 参数，以及直接向对象写属性自动转换为 url】使用实例
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- EditText默认不获取焦点弹出键盘
- VueX--VUE核心插件
- whlie循环和for循环的应用
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)