1、动态传参路由

有的情况下，普通的路由跳转无法满足开发的需求，或是针对某些特殊的需求，普通的路由拿起来开发就会非常的繁琐，常见的一种需求：电影app的一个列表展示的是近期所有的热门电影，用户通过点击某个电影进去电影详情，并且可以查看该电影的电影评价，一般针对这种，使用动态路由传参，前端只需要将用户点击的某个电影的那个电影id传给后台，然后后台返回对应的一系列数据，前端拿到数据渲染即可，这样所有的电影详情与电影评价只需要替换掉数据即可实现所有需求。

2、创建路由文件

path: '/advance/:id/:name'使用:表明可以动态传的参数值，如果在路由文件不这样处理，而当点击电影项又进行跳转操作，这时，Vue会将对应的hash路径匹配到带有*号的重定向的页面中去。

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

3、film电影列表组件

this.$router是指的路由对象，而this.route是指的当前的路由，this指向何时挂载的$router呢？当Vue实例创建完成，在main.js中有这么一段代码就会被执行

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

这时this上就会存在router中有一个方法push，可以将需要跳转的目标路由压入，实现页面跳转，这种和a标签的用法非常相像，a标签的跳转有两个方式：一种是a标签中写个href去跳转，另外一种是编程式导航window.location.href去进行跳转。
因此，在Vue的页面跳转中，也存在这两种方式：一种声明式导航<router-link></router-link>，另外一种是编程式导航this.$router.push()

<template>
  <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>
</template>
<script>

export default {
  data(){
    return {
      filmsList:[
        {
          filmId:'12',
          filmName:'电影一'
        },
        {
          filmId:'13',
          filmName:'电影二'
        },
        {
          filmId:'14',
          filmName:'电影三'
        },
        {
          filmId:'15',
          filmName:'电影四'
        },
        {
          filmId:'16',
          filmName:'电影五'
        }
      ]
    }
  },
  methods:{
    handleSwitch(id,name){
      this.$router.push(`/advance/${id}/${name}`);
    }
  }
}
</script>

<style scoped>
.film ul{
  list-style: none;
}
</style>

4、电影评价组件

this.$route.params这个对象中就会存在路由跳转传参传过来的值，因此，这整个步骤就是一个动态路由的简单实现。

<template>
  <div class="cinema">
    <h1>评价页面</h1>
    <h2>电影的ID为：<span>{{filmId}}</span>,电影名称为：<span>{{filmName}}</span>的评价</h2>
  </div>
</template>

<script>
export default {
  name: 'cinema',
  data(){
    return {
      filmId:'',
      filmName:''
    }
  },
  mounted(){
    // 获取hash值
    console.log(this.$route);
    this.filmId = this.$route.params.id;
    this.filmName = this.$route.params.name
  }
}
</script>
<style scoped>
.cinema span {
  color: red;
}
</style>