{
path: '/movies',
component: () => import(/* webpackChunkName: "movies" */ '@/views/Movies/Index.vue'),
children: [
{
path: '',
name: 'movies',
component: () => import(/* webpackChunkName: "movies" */ '@/views/Movies/List.vue'),
},
{
path: ':id(\\d+)',
name: 'movies-item',
props: ({ params }) => ({ id: +params.id }),
component: () => import(/* webpackChunkName: "movies" */ '@/views/Movies/Item.vue'),
},
],
},
Index.vue
<template>
<div :class="$options.name">
<router-view />
</div>
</template>
<script>
export default {
name: 'view-movies',
};
</script>
<style lang="stylus" scoped></style>
List.vue
Тут выводишь свои items, для каждого лучше использовать отдельный компонент, в который прокидываешь объект с item и в котором в вычисляемых свойствах определяешь
linkTo() {
return { name: 'movies-item', params: { id: /* тут id конкретного item */ } };
},
То есть в линке уже у тебя будет :to="linkTo"
