Vue.js 2 Design Patterns and Best Practices

Child routes

We can also access posts from our API, and as a result, we can display both the posts' information alongside our user information. Let's create a new component named UserPosts.vue:

<template>  <div>    <ul>      <li v-for="post in posts" :key="post.id">{{post.title}}</li>    </ul>  </div></template><script>import { API } from '../../utils/api';export default {  data() {    return {      posts: [],    };  },  beforeRouteEnter(to, from, next) {       next(vm =>          API.get(`posts?userId=${to.params.userId}`)          .then(response => (vm.posts = response.data))          .catch(err => console.error(err))     )  },};</script>

This allows us to get posts based on our userId route parameter. In order to display this component as a child view, we'll need to register it as such within the