短文-常用代码-vue-router@next获取query参数值

背景

在前端开发中, 经常需要获取到当前的query参数值, 并做对应的操作, 本文主要利用vue-router@next封装工具类函数来获取query参数值

为了解决哪些问题?

1. vue-router@next中query参数为null | string | null[] | string[] | Array<string | null>不利于处理, 而通常我们传参就是取一个就行
2. KeepAlive组件生效时, 切换至其他页面时, route.query也会变化造成响应的问题
3. 当出现回退页面时, router.query实时响应造成的页面数据混乱问题

解决方案

1. 代码逻辑处理
2. 需要监听onActivated事件, 并且需要使用isDeactivated状态来判断页面是否处于生效状态
3. 这个在issue中已经提到过, 在watch时增加{ flush: 'post' }参数, 即可处理掉

实际解决封装代码

export function getQuery(name: string): Ref<string> {
  const route = useRoute();
  const instance = getCurrentInstance();
  // 实际Query值
  const realQueryStr = computed(() => {
    const v = route.query[name];
    const vv = Array.isArray(v) ? v[0] : v;
    return vv ?? "";
  });
  // 返回的Query值
  const rStr = ref(realQueryStr.value);
  // 监听实际Query值, 当组件没有隐藏时才会修改
  watch(
    realQueryStr,
    (val) => {
      nextTick(() => {
        // 由于KeepAlive组件使用了postWatch, 导致isDeactivated值无法及时更新
        if (!instance?.isDeactivated) { // 仅在页面生效时进行数据更新
          rStr.value = val;
        }
      });
    },
    { flush: "post" }
  );
  // 监听组件状态, 当被激活时, 重新更新下最新值
  onActivated(() => {
    rStr.value = realQueryStr.value;
  });
  return rStr;
}

复制代码