启动 vue 页面时如何从服务器获取参数?

Question

您好，我需要知道如何解决此问题。

我想知道的是，如何打开包含数据参数的页面。

这是我想做的流程。

1. 有几个人收到电子邮件。 有一个按钮可以链接到带有其 ID 的页面。
2. 当他们按下按钮时，服务器会识别他们并从数据库发送他们的名字。
3. 将它们重定向到主页。 使用其名称数据。
4. 主页(vue(显示他们的名字，如"欢迎回家。史密斯先生">

我卡在步骤 3 和 4 之间。我正在发送他们的姓名数据作为查询。 但不知道如何接收它们。

我认为它可以用作道具。 但它只显示"未定义">

这是我的节点JS代码。

res.redirect(url.format({
pathname:"/",
query: {
"name": rows[0].name,
"familyname": rows[0].familyname,
"gender":rows[0].gender
}
}));

这是 vue 路由器部分。 (路由器.js(

routes: [
{
path: '',
props: true,
component: () => import('./layouts/main/Main.vue'),
children: [ ... ]
}]

我正在像这样制作我的 main.vue 代码。

export default {
props: ['name','familyname','gender'],
methods: {
showprops() {
alert(this.$props.name);
}
},
created() {
this.showprops();
}

调用警报(this.$props.name(时，当前结果未定义。 如何解决此问题？

提前谢谢你。

Answer 1

$route.query

看起来您正在将参数包含在query parameter，例如/?name=xxx&familyname=xxx&gender=xxx.要从 vue 路由获取查询参数，您必须使用this.$route.query。

$route.道具

要拥有像this.$route.props这样的 props，这将需要一个像/user/12345/bob这样的 url 和一个像 vue 路由器设置这样的 vue

routes: [
{ path: '/user/:id/:name', component: User, props: true }
]

将查询参数转换为 vue 路由器属性

在官方的 vue 路由器文档中，你会发现一个非常好的例子，说明如何使用Function Mode将查询参数转换为 props (https://router.vuejs.org/guide/essentials/passing-props.html#function-mode(。

const router = new VueRouter({
routes: [
{ path: '/search',
component: SearchUser,
props: (route) => ({ query: route.query.q })
}
]
})

从上面的示例中，URL/search?q=vue会将{query: 'vue'}作为 props 传递给SearchUser组件。