vue 动态路由在路由懒加载时页面不刷新问题

1、未用懒加载，vue中路由代码如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/helloWorld',
            name: 'HelloWorld',
            component:HelloWorld
        }
    ]
})

2、使用懒加载

方法如下：const HelloWorld = （）=>import('需要加载的模块地址') （不加 { } ，表示直接return）

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/helloWorld',
      name: 'HelloWorld',
      component: ()=>import("@/components/HelloWorld")
    }
  ]
})

3、动态路由, this.$route.params.name，

{ path: '/helloWorld/:id/:name', name: 'second', component: () => import('@/view/HelloWorld') }

4、浏览器访问

http://localhost:8001/#/helloWord/10/mike

5、之后 

this.$router.push({path:'/helloWorld', params:{

    id:11,

   name:'jane'

}})

6、页面不刷新

7、原因是路由懒加载会对组件缓存，在该组件上加一个

<template>
  <div :key="$route.params.id + '_' + $route.params.name">
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  updated() {
    this.id = this.$route.params.id
    this.name = this.$route.params.name
  }
}
</script>

8、再次操作，解决了，这个原因，原理是通过key强制触发updated方法，从而刷新组件