Vue官方文档： Vue Router (vuejs.org)

1、命名路由

命名路由就是给某个路由加个name:名字，通过给路由添加名字，这样路由传参跳转就会衍生出一种新的方式去跳转。

1.1、router.js路由文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/index.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'index',
    component: Index
  },
  {
    path: '/films',
    name: 'films',
    component: () => import('../views/films.vue')
  },
  {
    path: '/cinema',
    name: 'cinema',
    component: () => import('../views/cinema.vue')
  },
  {
    path: '/advance/:id/:name',
    name: 'advance',
    component: () => import('../views/advance.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

1.2、跳转路由

通过params:{id:id,name:name}把参数id和name传进去

  <div class="film">
    <h1>电影页面</h1>
    <ul>
      <li v-for="item in filmsList" :key="item.filmId" @click="handleSwitch(item.filmId,item.filmName)">
        <h5>电影名称：{{item.filmName}}</h5>
      </li>
    </ul>
  </div>

    // 路由跳转
    handleSwitch(id,name){
      this.$router.push({name:"advance",params:{id:id,name:name}});
    }
    
    // advance页面获取传过来的参数id和name
    this.filmId = this.$route.params.id;
    this.filmName = this.$route.params.name

结果.png

依据结果，参数在评价页面依旧是获取到了的，因此这就是使用命名路由实现的代参路由跳转。