vue路由器无法获取查询参数

2023-03-23 14:01| 来源: 网络整理| 查看: 265

我有一种玩具项目开始使用vue和vue路由器，但我被困在获取查询参数。从我所读到的来看，我的设置可能不同寻常……我不使用npm或vue cli，我不构建或缩小。就像这样开始…

// public/index.html .

然后我像这样设置我的路由器…

// public/index.js import Play from './ Play .js' import Settings from './ Settings .js' // others const routes = [{path: '/ Play '， component: Play}， {path: '/ Settings '， component: Settings}， // others…{路径:/:pathMatch(. *) *’,重定向:' /玩'});const router = VueRouter。createRouter({history: VueRouter.createWebHashHistory()， routes，});const app = Vue.createApp(app);app.use(路由器);app.mount(主要的);

这很好，路由在我的应用程序中工作得很好。我的应用程序启动，我可以导航以这种方式播放:(注意，这是使用vscode和liveserver插件，配置在/public的5500端口启动)

http://localhost:5500/#/play

它的工作原理!我可以去http://localhost:5500/#/settings看看我的设置就好了。问题是我不能看到查询参数。例如，我想passgameId = xyz123去我的游乐场所。当我进入chrome地址栏:

http://localhost:5500/#/play?gameId=xyz123

然后按回车键。发生的第一件事是什么都没有。当我第二次按回车键时，接下来发生的事情是浏览器导航到http://localhost:5500/#/play(没有查询参数)。在我的vue中，我检查路由查询参数，总是一无所获。似乎在加载这个vue时，系统的某些部分已经更改了URL以排除该查询。

// public/play.js mounted () {const gameId = this.$route.query.gameId;console.log (gameId);//不记录任何信息}

我尝试了很多方法:

使用createWebHistory ()(没有散列)……所有的路由都中断了，我的浏览器显示“无法获取/播放” 使用老的“历史”vue路由器2.x的模式。它似乎不再存在，我不能降级路由器而不降级vue。从查询参数改为路由参数。我试着定义路线“播放/:gameId”但效果是一样的不使用live服务器-我部署到firebase托管，并尝试在那里查询参数。如果没有vscode调试器，我就看不到这么多，但行为看起来是一样的。不要这样尝试* . *path match，这可能会重写URL。不，同样的行为。

我被困住了，从谷歌上看，似乎没有任何人抱怨过这个问题，以一种符合我的问题的方式。非常感谢你的帮助。

【本文地址】

公司简介

联系我们