如何在散列模式下使用 Vue 路由器查询参数？

Question

我想访问 Vue 方法中的 URL 参数，而不是使用 window.location.href 和解析。

router/index.js

const router = new Router({
  mode: 'hash',
  routes: []
});

router.beforeEach((to, from, next) => {
/*
*WOULD LIKE TO ACCESS THE URL PARAMS HERE*
**to.query** is not working in hash mode.
*/
})

Answer 1

您显示的用于记录查询参数的代码是正确的，因此路由有问题。要在模板中创建 link，请使用 <router-link>:

<router-link to="/myroute?id=5"></router-link>

要在脚本中以编程方式路由，请使用 this.$router.push (or this.$router.replace):

this.$router.push('/myroute?id=5');

当您登录 to.query 时，您应该看到：

{ id: "5" }

---

编辑：您透露（在评论中）您正在 link 从外部访问该应用程序。

在 hash 模式下从外部站点链接

http://localhost/#/?id=5

当link以散列模式从外部访问站点时，您必须使用url 中的散列，否则查询将无法正确注册。查询必须跟在散列之后，但如果不使用散列，查询将放在散列之前。