如何解决点击vue-styleguidist侧边栏组件时页面重载、URL参数丢失问题

问题原因 #

vue-styleguidist v4.36.1默认的侧边栏路由跳转逻辑只会携带内置的路由参数，不会保留用户自定义的URL query参数，因此点击侧边栏后原有自定义参数会被清空。

可行解决思路 #

方案1：全局路由拦截拼接参数（侵入性最低）

在vue-styleguidist的全局引入脚本中注册路由守卫，每次跳转前自动拼接需要保留的query参数：

1. 新增全局脚本文件styleguide/global-query.js

// 保留初始加载时的所有自定义query参数
const reservedParams = new URLSearchParams(window.location.search)
// 等待styleguidist实例初始化完成
const timer = setInterval(() => {
  if (window.vueStyleguidist?.router) {
    clearInterval(timer)
    const router = window.vueStyleguidist.router
    router.beforeEach((to, from, next) => {
      const finalQuery = { ...to.query }
      // 按需保留需要的参数，这里示例保留name参数，可自行扩展
      if (reservedParams.has('name')) {
        finalQuery.name = reservedParams.get('name')
      }
      next({ ...to, query: finalQuery, replace: true })
    })
  }
}, 100)

2. 在styleguide.config.js中引入该全局脚本

const path = require('path')
module.exports = {
  // 其余原有配置不变
  require: [
    path.resolve(__dirname, 'styleguide/global-query.js')
  ]
}

方案2：重写侧边栏跳转逻辑

如果需要更灵活的控制，可以自定义替换vue-styleguidist的侧边栏组件，在跳转时主动拼接当前query参数：

1. 在styleguide.config.js中配置自定义侧边栏组件

module.exports = {
  // 其余原有配置不变
  styleguideComponents: {
    Sidebar: path.join(__dirname, 'styleguide/components/CustomSidebar')
  }
}

2. 自定义侧边栏组件内部将原有<router-link>的跳转目标拼接上当前query参数即可。

方案3：全局点击拦截（兼容旧版本）

如果无法获取到router实例，可直接拦截侧边栏的点击事件，手动拼接参数跳转：

document.addEventListener('click', (e) => {
  // 匹配侧边栏内的跳转链接，类名可根据实际渲染结果调整
  const sidebarLink = e.target.closest('[class*="rsg--sidebar"] a')
  if (sidebarLink) {
    e.preventDefault()
    const targetPath = sidebarLink.getAttribute('href')
    const currentQuery = new URLSearchParams(window.location.search)
    // 拼接参数后跳转
    window.history.pushState({}, '', `${targetPath}?${currentQuery.toString()}`)
    window.vueStyleguidist.router.push(targetPath)
  }
})

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