访问路由器参数 VueJS

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

简而言之。我有一个加载到屏幕上的动态元素列表，当您单击其中一个项目时，我想转到该页面以及其余数据。我遵循了与使用 React 时相同的流程。

路由器.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 时，我只是得到了未定义的结果。我可以向您保证，数据确实存在，因为数据被硬编码到浏览器中。

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

将您的链接更改为：

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

变化：

• 使用了name指定路线的属性
• 删除了硬编码路径
• 通过了idparam，因为这是路由定义中给出的参数名称（/:id)