CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Nikster
Nikster

Reputation: 474

Access Router Params VueJS

I'm creating a blog using Vuejs and I'm fairly new to it.

In short. I have a dynamic list of elements that are loaded onto the screen and when you click on one of the items, I want to go to that page with the rest of the data. I followed somewhat of the same process I did if I was using 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
    }
  ]
});

I have my router setup to take dynamic links.

Component That Creates List Data

<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>

As you can see that is how I did my router-link and in my actual Page View this is how I'm trying to read the data. 2 different way's I tried to read it.

  props: {
    post: Object
  },

AND

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

and when I try to console out post/postData I just get undefined. I can assure you that the data does exist since the data is hard coded into the browser.

Also I tried to pass the params as key value pairs as well and that didn't work. I also create a new variable for the data I was going to be passing through the link. That didn't work either. I also haven't tired query, just because I don't want an ugly looking link.

Upvotes: 2

Views: 1129

Answers (1)

Dan
Dan

Reputation: 63059

Change your link to:

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

The changes:

  • Used the name property to specify the route
  • Removed the hardcoded path
  • Passed the id param, as that is the param name given in the route definition (/:id)

Upvotes: 2

Related Questions