javascript - VueJS : How to use routing in an Multi Page App to send url query params?

标签 javascript vue.js vue-router

我对 VueJS 有点陌生,我正在 VueJS 中使用 MPA 方法创建一个具有多个页面的应用程序 ( using this answer ),并且我希望在 url 中包含一个查询参数,用于导航到注册页面定价页面如“localhost:8080/signup?bundle=standard”

这是我的页面结构:

( image )

我使用了vue router和router link来做到这一点,但我不知道放在哪里 路由器 View 如文档中所示,他们仅在单页面应用程序中使用它。

我怎样才能实现这个目标?如何获取 MPA 应用程序结构中的查询参数?

最佳答案

在 vue.js 中有几种带参数重定向的方法,您可以简单地从任何方法进行重定向,如下所示:

setTimeout(() => {
              return  this.$router.push({name: 'Your_Router_Name_Hear', params: { bundle: 'standard' }})
            }, 100);

另一种方法是使用参数从模板重定向:

<router-link:to="{ name: 'Your_Router_Name_Hear', params: { bundle: 'standard' }}" class="button" > <i class="fa fa-edit"></i> Edit </router-link>

关于javascript - VueJS : How to use routing in an Multi Page App to send url query params?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58641507/

相关文章:

javascript - 如何删除元素并在 <ul> 列表中的第 n 个 <li> 之后添加新元素?

javascript - 中止错误 : The play() request was interrupted by a call to pause()

javascript - vue-router 中可能的模板注入(inject),如 Angular-ui-router

javascript - 在组件函数中使用 Vue 动态路由名称

javascript - 组件内 Navigation Guard 回调不起作用 : Nuxt JS and `beforeRouteEnter`

javascript - 传入整数数组以创建新日期不起作用

javascript - IEWebGL插件Three.js

javascript - VueX 商店最佳实践中的 VueJS 错误处理

java - 创建名称为 'restHandlerMapping' 的 bean 时出错,缺少路径映射。 bean 'repositoryController' 必须映射到非空路径