Vue Router Patterns Chapter 20.catch(err => console.error(err))
)
},
};
</script><style>
.container {
line-height: 2.5em;
text-align: center;
}
</style>As there should never be more than one user inside of our detail page, the userInfo
variable has been created as a JavaScript object rather than an array.
We can then add the new component to our user.routes.js:
import UserList from './UserList';
import UserDetail from './UserDetail';export const userRoutes = [
{ path: '/', component: UserList },
{ path: '/:userId', component: UserDetail },
];In order to link to this component, we can add router-link within our UserList
component:
<template>
<ul>
<li v-for="user in users" :key="user.id">
<router-link :to="{ path: `/${user.id}` }">
{{user.name}}
</router-link>
</li>
</ul>
</template>