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

Question

我有一个使用 vue 和 vue router 开始的玩具项目，但我一直在获取查询参数。我的设置可能与我读过的内容不同……我不使用 npm 或 vue cli，我不构建或缩小。就这样开始吧...

// public/index.html

<head>
    <!-- some other includes like this -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js" integrity="sha512-aHDp6BDlnbRLDTxmY5GIqQA0RQd6dmeKIDDDiEJlRrKNQPZbo2mjsR/DGMUzupcCpE4XgPyeIPnDQdJNUmeEhw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.13/vue-router.global.prod.min.js" integrity="sha512-RfYSruXiMtNZ9MzGNmxl3ljuCJsnlgj/KFabVMUh/gla9c7mjyggP9iTwFtrGYJhi0Qw7J3z0VMSeLRsNT92Fg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="./index.js" type="module"></script>
  </head>

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

// 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...
  { path: '/:pathMatch(.*)*', redirect: '/play' }
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});

// and later
const app = Vue.createApp(App);
app.use(router);
app.mount('main');

这很好，并且路由在我的应用程序中运行良好。我的应用程序启动，我可以这样导航玩：（注意，这是使用 vscode 和 liveserver 插件，配置在 /public 中的端口 5500 上启动）

http://localhost:5500/#/play

有效！我可以转到

http://localhost:5500/#/settings

并查看我的设置 vue 就好了。问题是我看不到查询参数。例如，我想将

gameId=xyz123

传递给我的 play vue。当我在 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); // always logs nothing
}

我尝试了很多东西：

使用
```
createWebHistory()
```
（无哈希）...然后所有路由都中断，我的浏览器显示“无法获取/播放”
使用 vue router 2.x 中较旧的
```
'history'
```
模式。好像已经不存在了，不降级vue就无法降级router了
从查询参数更改为路由参数。我尝试像
```
'play/:gameId'
```
那样定义路线，但效果完全相同
不要使用实时服务器 - 我部署到 firebase 托管并在那里尝试查询参数。如果没有 vscode 调试器，我看不到那么多内容，但行为看起来是一样的。
尝试不使用
```
*.*
```
路径匹配，认为这可能是重写 URL 的原因。不 - 同样的行为。

我被困住了，从谷歌搜索来看，似乎没有其他人以与我的问题相符的方式抱怨这一点。非常感谢任何帮助。

Answer 1

您使用路线，因此您的查询将只能从路由视图内部使用。

在

App.vue

你会看到类似：

<template>
    ...     
        <!-- To keep the audio within the media player component running, 
        simply keep this component alive over route changes -->         
        <router-view v-slot="{ Component }">
            <keep-alive include="Play">
                <component :is="Component" />
            </keep-alive>
        </router-view>
    ... 
</template>

然后，在 Play.vue 组件中，您可以访问路线的查询部分。

如果您有例如：

http://localhost:8080/#/play?media=https%3A%2F%2Fweb.replayer.app%2Fyour-light-by-lidija-roos.mp3&title=Your%20Light&artist=Lidija%20Roos&album=Not%20For %20销售&6.49=简介

然后在

Play.vue

或其子组件中您可以执行以下操作：

const query = this.$route?.query;

访问查询：

{ "media": "https://web.replayer.app/your-light-by-lidija-roos.mp3", "title": "Your Light", "artist": "Lidija Roos", "album": "Not For Sale", "6.49": "Intro" }

Answer 2

(1) 命名路由，使用参数，而不是查询，使用 props 选项

例如

{ name: 'play', path: '/play/:id?', component: Play, props: true },

(2) 上面的意思是 vue 需要定义 props，并且这些属性将采用路由参数的值...

// play.js export default { template, props: ['id'], // ...

(3)观看那些道具

watch: { id(newId, oldId) { if (newId) this.play(newId); } },

(4) 不确定这是否重要，但由于我已经命名了路线，所以我开始按名称导航...

this.$router.push('settings', params: { id: someId });

我关于这种方式起作用的理论是这样的：当我使用不同的查询字符串导航到相同的路线时，vue 已经挂载了，并且 vue / 路由器的某些组合决定它不应该再次挂载。 watched 属性给了我一种不依赖生命周期方法的方法。

Answer 3

<router-link v-bind:to="{name : 'showproduct' , params : {id:1}}">

对于条件参数

<router-link v-bind:to="{path:'/indexpage' ,query: { name: 'hello' }}">

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

问题描述投票：0回答：3

3个回答

最新问题

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

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3