如何根据路由变化更新Vue JS动态菜单项的params参数

当前导航配置是ES模块静态导出的，文件顶部读取token、导出导航数组的逻辑只会在应用首次加载模块时执行一次。后续下拉切换项目触发路由跳转时，静态导出的导航数组不会重新计算，菜单项里绑定的token永远是首次加载拿到的旧值，所以链接不会同步更新。

1. 调整静态导航配置，移除硬编码的token读取逻辑 #

打开@/navigation/project.js文件，删掉文件顶部所有读取localStorage、手动解析URL取token的代码，不要在配置里写死token值，改成如下结构：

export default [
    {
        header: "Projects",
    },
    {
        title: "Import",
        route: {
            name: "project-import",
            params: { token: null },
        },
        icon: "SettingsIcon",
    },
];

其他导航子文件如果也有依赖动态token的配置，按同样方式处理即可，不需要在静态文件里提前读取token。

2. 修改LayoutVertical.vue，实现导航响应式更新 #

原代码直接把导入的静态导航数组存在data里，不会随路由变化更新，改成监听路由参数变化、动态注入最新token的逻辑即可，修改后代码如下：

<template>
  <layout-vertical :nav-menu-items="navMenuItems">
    <router-view />
    <app-customizer
      v-if="showCustomizer"
      slot="customizer"
    />
  </layout-vertical>
</template>

<script>
import LayoutVertical from '@core/layouts/layout-vertical/LayoutVertical.vue'
import AppCustomizer from '@core/layouts/components/app-customizer/AppCustomizer.vue'
import { $themeConfig } from '@themeConfig'
import rawNavMenuItems from '@/navigation/vertical'

export default {
  components: {
    AppCustomizer,
    LayoutVertical,
  },
  data() {
    return {
      showCustomizer: $themeConfig.layout.customizer,
      navMenuItems: this.updateNavToken(rawNavMenuItems, this.$route.params.token)
    }
  },
  watch: {
    '$route.params.token'(newToken) {
      this.navMenuItems = this.updateNavToken(rawNavMenuItems, newToken)
    }
  },
  methods: {
    updateNavToken(navItems, token) {
      return navItems.map(item => {
        const newItem = { ...item }
        // 替换当前菜单项路由里的token
        if (newItem.route?.params && 'token' in newItem.route.params) {
          newItem.route.params.token = token
        }
        // 递归处理子菜单
        if (newItem.children?.length) {
          newItem.children = this.updateNavToken(newItem.children, token)
        }
        return newItem
      })
    }
  }
}
</script>

• 首次加载页面时，会直接从当前路由参数里读取token注入导航配置，和原有表现一致
• 切换下拉选项触发路由跳转后，watch会监听到路由token的变化，自动重新生成带新token的导航数组传给侧边栏组件，菜单项链接会同步更新
• 该逻辑不依赖localStorage的读写时序，直接从路由源数据取token，刷新页面时也能自动拿到当前URL对应的正确token

内容的提问来源于stack exchange，提问作者Shibbir