访问路由器参数VueJS

Question

我正在使用Vuejs创建一个博客，我对它还很陌生

简而言之。我有一个加载到屏幕上的元素的动态列表，当你点击其中一个项目时，我想带着其余的数据转到那个页面。我遵循了与使用React时相同的过程。

Router.js

export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/post/:id",
name: "PostView",
props: true,
component: PostView
}
]
});

我有我的路由器设置采取动态链接。

创建列表数据的组件

<template>
<router-link v-bind:to="{ path: 'post/' + post.postId, params: { post } }">
<div> .... </div>
</router-link>
</template>
<script>
import moment from "moment";
export default {
name: "recentPostTile",
props: {
post: Object,
},
};
</script>

正如你所看到的，这就是我的路由器链接的方式，在我实际的页面视图中，这是我试图读取数据的方式。我试着用两种不同的方式阅读。

props: {
post: Object
},
AND
data() {
return {
postData: this.$route.params.post, (also tried with $route)
};
},

当我试图控制post/postData时，我只是得到了未定义。我可以向你保证，数据确实存在，因为数据是硬编码到浏览器中的。

此外，我还尝试将params作为键值对传递，但没有成功。我还为要通过链接传递的数据创建了一个新的变量。这也没用。我也没有厌倦查询，只是因为我不想要一个难看的链接。

Answer 1

将链接更改为：

<router-link :to="{ name: 'PostView', params: { id: post.postId, postData: post } }">
<div> .... </div>
</router-link>

变化：

• 使用name属性指定路由
• 删除了硬编码路径
• 传递了id参数，因为这是路由定义中给定的参数名称(/:id(