页面刷新后Vue Router的push方法失效问题排查

我编写了一个向URL中添加随机月份名称的函数，点击该函数后刷新页面，URL便不再发生变化，请问这一问题的原因是什么？

export default {
  data() {
    return {
      filters: [],
      mounts: [
        'january',
        'february',
        'march',
        'april',
        'may',
        'june',
        'july',
        'august',
        'september',
        'october',
        'november',
        'december',
      ],
    }
  },
  watch: {
    '$route.params.filter': function (value) {
      console.log('value:', value)
    },
  },
  mounted() {
    const routeFilters = this.$route.params.filter

    if (Array.isArray(routeFilters) && routeFilters.length > 0) {
      this.filters = routeFilters
    }
  },
  methods: {
    onClick() {
      const randomIndex = Math.floor(Math.random() * this.mounts.length)
      this.filters.push(this.mounts[randomIndex])
      const path = `/auth/${this.filters.join('/')}/`
      this.$router.push({ path })
    },
  },
}

核心问题原因 #

1. 路由参数解析不兼容数组场景
   你的代码默认$route.params.filter是数组，但如果路由规则没配置成接收多段参数（比如没加*通配符），当URL是/auth/january/february/这种多段路径时，filter会被解析成字符串january/february而非数组。此时mounted钩子中的Array.isArray(routeFilters)判断失败，this.filters无法从URL读取已有的月份，刷新后直接回到初始空数组状态。

2. 刷新后状态丢失导致重复生成单一月份
   页面刷新后Vue实例重建，filters重置为空数组。点击按钮时只会往空数组里push一个随机月份，生成的URL是/auth/xxx/。如果随机到重复的月份，看起来URL就没变化；就算不重复，刷新后又会回到空数组，再次点击还是生成单一月份，给你造成“URL不再变化”的错觉。

修复方案 #

1. 调整路由规则
   在路由配置里给参数加上*通配符，让它能接收多段路径并解析成数组：

   {
     path: '/auth/:filter*',
     component: 你的组件
   }
   

2. 修正mounted中的参数处理逻辑
   兼容参数为字符串（单月份）和数组（多月份）的情况：

   mounted() {
     const routeFilters = this.$route.params.filter
     if (routeFilters) {
       this.filters = Array.isArray(routeFilters) ? routeFilters : [routeFilters]
     }
   }
   

3. 变量名修正（可选但规范）
   代码里的mounts是拼写错误，建议改成months，避免后续维护混淆。

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