VueJS：如何在多页面应用程序中使用路由来发送 url 查询参数？

Posted 2023-02-22

【中文标题】VueJS：如何在多页面应用程序中使用路由来发送 url 查询参数？

【英文标题】：VueJS: How to use routing in an Multi Page App to send url query params?

【发布时间】：2020-02-26 16:54:54

【问题描述】：

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

这是我的页面结构：

(image)

我用vue router和router link来做这个，但是不知道放哪里 文档中的路由器视图，它们仅在单页应用程序中使用它。

我怎样才能做到这一点？如何在 MPA 应用结构中获取查询参数？

【问题讨论】：

能否请您提供一些代码或您到目前为止所做的工作？

【参考方案1】：

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>