删除url的search参数,避免页面刷新

背景

主应用通过search路径参数,给子应用传参token。传完之后删除search参数,且不刷新页面

实现

在子应用中的App.vue中

<template>
  <el-config-provider :z-index="3000" :locale="zhCn">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { onMounted } from 'vue';

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
if (params.get('access')) {
  const [TOKEN, currentNavPoi] = [params.get('access'), params.get('currentNavPoi')];
  localStorage.setItem(
    'TOKEN',
    JSON.stringify({
      access_token: TOKEN,
    })
  );
  localStorage.setItem('currentNavPoi', currentNavPoi as string);
}

onMounted(() => {
  params.delete('currentNavPoi');
  params.delete('access');
  url.search = params.toString();
  window.history.replaceState(null, '', url.href);
});
</script>

相关推荐

  1. 删除urlsearch参数避免页面刷新

    2024-04-14 07:00:05       38 阅读
  2. js如何实现修改URL参数并不刷新页面

    2024-04-14 07:00:05       36 阅读
  3. 如何做到修改 url 参数页面刷新

    2024-04-14 07:00:05       28 阅读
  4. React几种避免子组件无效刷新方案

    2024-04-14 07:00:05       40 阅读
  5. Django 里获取url参数

    2024-04-14 07:00:05       29 阅读
  6. vue-uniapp页面参数

    2024-04-14 07:00:05       33 阅读
  7. 从输入URL页面加载全过程

    2024-04-14 07:00:05       71 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-14 07:00:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-14 07:00:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-14 07:00:05       87 阅读
  4. Python语言-面向对象

    2024-04-14 07:00:05       96 阅读

热门阅读

  1. 天空盒1-天空盒的实现原理

    2024-04-14 07:00:05       34 阅读
  2. Pytorch安装小坑(Windows+cu111)

    2024-04-14 07:00:05       38 阅读
  3. 微信小程序相关

    2024-04-14 07:00:05       33 阅读
  4. KDTree和Octree的区别

    2024-04-14 07:00:05       38 阅读
  5. nuxt.config.js配置

    2024-04-14 07:00:05       36 阅读
  6. React状态与引用(Refs)- 差异和使用场景

    2024-04-14 07:00:05       37 阅读