Vue 路由器在"history"模式下调用 router.push() 后添加 #(哈希)

Question

在我调用的特定UI操作上：

router.push({ name: router.history.current.name, params: { league: league } })

我只想加上"/：联盟；路径末尾的param。我有一条单独的路线：

const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home, name: 'home' },
{ path: '/:league', component: Home, props: true, name: 'home/league' },
]
})

例如，如果用户在/并且他选择"；联盟；从菜单中，我希望url更改为/leagueName。

它是有效的，但它在url的末尾添加了#，最后变成了/leagueName#。有没有办法删除散列？我已经在"；历史"；模式

Answer 1

我发现了几个错误：

1. 检查路由器的连接和配置方式：

const routes = [
{ path: '/', name: 'Home', component: Home },
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

2. 当您调用推送时，需要编写$router
3. 你不能写像router.history.current.name这样的名字，因为你会转到同一页。因此明确声明：home/league
4. 最好不要使用一个组件来输出不同的路由，这不是很好。但是你可以使用子路线

Answer 2

不要创建指向同一组件的单独路由，而是在一条路由上使用一个可选参数：

export default new VueRouter({
mode: "history",
routes: [
{
path: "/:league?", // `?` makes `league` OPTIONAL
component: Home,
props: true,
name: "home"
}
]
});

如果您需要使用$router.push()仅更改参数值，则可以省略name或path:

<button @click="$router.push({ params: { league: 'myLeague' } })">
Go to My League
</button>

注意，如果UI是一个链接，那么最好使用router-link，这样可以避免Avoided redundant navigation to current location控制台警告：

<router-link :to="{ params: { league: 'myLeague' } }">Go to My League</router-link>

演示