无法读取查询参数，因为 vue.js 将 #/ 添加到 url 的末尾

Posted 2023-02-22

【中文标题】无法读取查询参数，因为 vue.js 将 #/ 添加到 url 的末尾

【英文标题】：Cannot read query params becouse vue.js is adding #/ to the end of url

【发布时间】：2018-08-01 02:22:18

【问题描述】：

我在 vueJS 中有一个单页应用：

let router = new VueRouter(
  routes: [
     path: '/',  component: Dis13HomeComponent ,
     path: '**', component: Dis13HomeComponent 
  ]
);

在mounted() 的主要组件中，我得到这样的url 参数：

this.$route.query.token;

但是如果我打开 http://www.myapp.com/app.html?token=s56ds6d5d56f6ef6e 它不会读取令牌参数，因为 vue 正在将 #/ 添加到 url 的末尾，所以它看起来像 http://www.myapp.com/app.html?token=s56ds6d5d56f6ef6e#/

如果我打开这种格式的 url：http://www.myapp.com/app.html#/?token=s56ds6d5d56f6ef6e，那么它可以工作，但是这个路径在服务器上是被禁止的。

如何读取令牌参数？

【参考方案1】：

让您的路由器使用history 模式，您将不再拥有“#”。

const router = new VueRouter(
  mode: 'history',     // <------------- HERE
  routes: [
     path: '/',  component: Dis13HomeComponent ,
     path: '**', component: Dis13HomeComponent 
  ]
);