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>

如您所见，这就是我执行路由器链接的方式，在我的实际页面视图中，这就是我尝试读取数据的方式。我尝试了 2 种不同的阅读方式。

  props: {
    post: Object
  },

AND

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

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

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

Answer 1

将您的链接更改为：

def base(k,l):
    result=''
    while k!=0:
        remainder = k%l
        k=k//l
        result= result + str(remainder)
    return result

变化：

使用 <router-link :to="{ name: 'PostView', params: { id: post.postId, postData: post } }"> <div> .... </div> </router-link> 属性指定路线
删除了硬编码路径
传递了 name 参数，因为这是路由定义 (id) 中给出的参数名称

访问路由器参数 VueJS

1 个答案: