Bootstrap

删除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>
;