Vue Router history模式调用router.push传参后URL末尾意外出现#的问题

结合你的代码场景，多余的#通常来自两类问题，同时你的跳转逻辑本身存在小瑕疵：

• Vue Router跳转默认继承当前路由的hash值，哪怕是空值（即URL末尾的#），未主动清空就会带到新URL中
• 如果触发跳转的是<a>标签，未阻止默认锚点行为时，浏览器会自动在当前URL末尾追加空hash
• 当前在home路由（path为/）时，该路由未定义:league参数占位符，直接用当前路由名跳转的话，传入的params.league不会被拼入路径，需要显式指定跳转目标为带参数的home/league路由

1. 调整路由跳转逻辑 #

修改你的跳转代码，修正路由名取值逻辑，同时显式清空hash：

// 判定当前路由，选择正确的跳转目标
const targetName = router.history.current.name === 'home' ? 'home/league' : router.history.current.name
router.push({
  name: targetName,
  params: { league: league },
  hash: '' // 强制清空继承的hash值
})

2. 阻止触发元素的默认行为 #

如果跳转事件绑定在<a>标签上，需要在事件处理函数中阻止默认行为：

function onLeagueSelect(league, e) {
  e.preventDefault() // 避免a标签默认跳转追加空hash
  // 上面的跳转逻辑放在此处
}

你现有的路由配置没有问题，props: true会将路由解析出的league参数直接作为props传入Home组件，无需额外在组件中读取路由实例参数。

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