Vue-router, how to create list-element routing?

Question

Vue.js

You need to create a routing to go from the movie directory to the movie.
Here is the written code:

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>

How do I jump to a movie description?

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
Here you display your items, for each it is better to use a separate component, into which you throw an object with item and in which you define in calculated properties

linkTo() {
   return { name: 'movies-item', params: { id: /* тут id конкретного item */ } };
},

That is, in the link you will already have :to="linkTo"