Vue-router, как создать роутинг по типу список — елемент?

Question

[Сергей Алексеев]

Нужно создать роутинг для перехода с каталога фильмов на фильм.
Вот написанный код:

import Vue from 'vue'
import VueRouter from 'vue-router'
import MovieContent from '../components/MovieContent.vue'

Vue.use(VueRouter)

const router = new VueRouter({
	mode: 'history',
	routes: [
		{
			path: '/movie/:name',
			name: 'Movie',
			component: MovieContent
		}
	]
})

export default router



import Vue from 'vue'
import App from './components/App.vue'
import router from './routers/movies.js'

Vue.config.productionTip = false

new Vue({
	router,
	render: h => h(App)
}).$mount('#app')



<template>
	<li class='movie-item'>
		<router-link :to="{ name: 'Movie', params: {name: `${movie.name}`}}">
			<img :src="movie.img" class='movie-item__img movie-item__name' />
			<span class='movie-item__name'>
				{{movie.name}}
			</span>
		</router-link>
		<router-view></router-view>
	</li>
</template>

Последний кусок кода это шаблон фильма, который является ссылкой на описание фильма. Но при нажатии содержимое появляется снизу элемента, на место компонента <router-view></router-view>

Как сделать переход на описание фильма?

Answer 1

[Степан Кормилин]

{
        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"