Vue Router 在 "history" 模式下调用 router.push() 后添加 # (hash)

Question

我调用的特定 UI 操作：

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

我只想在路由的末尾添加“/:league”参数。我有一条单独的路线：

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

我发现了几个错误：

检查您的路由器 connected 和配置情况：

const routes = [
  { path: '/', name: 'Home', component: Home },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

调用推送时需要写$router
你不能写像router.history.current.name这样的名字，因为你会去同一个页面。所以明确声明：home/league.
最好不要用一个组件输出不同的路由，这样不太好。但是你可以使用 child routes.

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 是 link，最好使用 router-link，这样可以避免 Avoided redundant navigation to current location 控制台警告：

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

demo

Vue Router 在 "history" 模式下调用 router.push() 后添加 # (hash)

Vue Router adds # (hash) after calling router.push() in "history" mode

vue.js

vue-router