[Vuejs]-Vuejs Suggestion regarding component rendering

by

0👍

This question is a bit open ended on how you would proceed with it so you might get flagged.

However, here is a potential solution:

So your profile route might look something like this:

/profile/:id

<template>
  <Posts :posts="posts" />
  <Friends :friends="friends" />
  <Followers :followers="follower" />
</template>

As the posts get rendered out, you can click on one to show the post.

At which point you can probably add a new route in your router/index.js that takes the user to a whole new component that doesn’t have the child/parent relationship.

{
  path: '/post/:id'
  component: () => import('../views/Post');
}

And once that route loads, you can fetch all of the post related data if you need it.

Alternatively, you can use child routes under your /profile/:id route, which in my opinion would be the more elegant solution.

Comment below if this didn’t answer your question and I’ll try to refine.

Leave a comment