动态路由的使用

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用，复用组件时，可以：
1、watch (监测变化) $route 对象
2、使用beforeRouteUpdate 导航守卫

以watch (监测变化) $route 对象为例（点击元素，元素更改颜色跳转下一页，点击返回按钮则回到上一页并重置元素样式）
id：数值从1-6
路由配置

routes: [{
    path: '/testIndex/:id',
    name: 'testIndex',
    component: () => import(/* webpackChunkName: "test" */ '../views/test/test.vue'),
  }]

组件中使用
currentNum：默认id为1
scoreArr：点击元素，向scoreArr中push一个数值，返回页面从scoreArr中pop一个数值，用于最终累计页面数

<template>
  <div class="bg">
    <div v-if="$route.params.id==currentNum" :class="activIndex ==1?'activite':''" @click="goToNextPage">
      {{currentNum}}
    </div>
  </div>
</template>

<script>
  let scoreArr = [] 
  export default {
    name: 'testIndex',
    data() {
      return {
        currentNum: 1,
        activIndex: '',
      }
    },
    created() {
      console.log('------pageInfo=======')
    },
    watch: {
      $route(to, from) {
        // 对路由变化作出响应...
        console.log('to----->', to)
        this.currentNum = to.params.id
        this.activIndex = '' // 清除本页面样式
        if (to.params.id < from.params.id) {
          const temp = scoreArr
          temp.pop()
          scoreArr = temp
          console.log(scoreArr, '------this.scoreArr')
        }
      }
    },
    methods: {
      goToNextPage() {
        if (this.currentNum > 6) {
        } else {
          this.activIndex = 1
          const vm = this
          setTimeout(() => {
            if (vm.currentNum < 6) {
              const temp = JSON.parse(JSON.stringify(scoreArr))
              temp.push(1)
              scoreArr = temp
              console.log(scoreArr, '+++++++this.scoreArr')
              vm.currentNum++
              vm.$router.push({
                path: '/testIndex/' + vm.currentNum,
              })
            } else {
              console.log('跳转')
            }
          }, 1000)
        }
      }
    }
  }
</script>

<style lang="stylus" scoped="scoped">
.activite
  color red
</style>