Currently, I am in the process of developing a blog using Vue.js and I am still learning the ropes.
To explain briefly, I have a list of dynamic elements that are displayed on the screen. When a user clicks on one of these items, I want to navigate to the respective page with all the related data. To achieve this, I followed a similar approach as I would if I were working with React.
Router Configuration (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 set up my router to handle dynamic links effectively.
Component Responsible for Generating 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 illustrated above is how I used the router-link. In my actual Page View, this is the method I attempted to retrieve the data in two different ways:
props: {
post: Object
},
AND
data() {
return {
postData: this.$route.params.post, (also tried with $route)
};
},
Unfortunately, when I try to log or display the post/postData, it returns undefined. Despite the fact that the data is hardcoded into the browser, it seems inaccessible. Additionally, I experimented with passing the parameters as key-value pairs without success. Creating a new variable for the data being passed through the link did not yield any positive results either. I have yet to experiment with query parameters due to aesthetic concerns regarding the appearance of the link.