为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题

为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题，可以通过以下步骤实现：

1. 在路由配置中使用Webpack提供的代码分割功能，将各个路由对应的组件打包为单独的js文件，实现懒加载。具体代码示例：

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

export default new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

1. 在路由切换时，展示一个全局的loading组件，以提示用户系统正在加载。

具体实现方法：

在App.vue文件中添加以下代码：

<template>
  <div id="app">
    <loading v-if="loading"></loading>
    <router-view :key="key"></router-view>
  </div>
</template>

<script>
import Loading from './components/Loading.vue'
export default {
  components: {
    Loading
  },
  data () {
    return {
      loading: true,
      key: 0
    }
  },
  watch: {
    $route (to, from) {
      this.loading = true
      this.key++
    }
  },
  mounted () {
    this.loading = false
  }
}
</script>

其中，loading为是否显示loading组件的状态，key为路由切换时，为router-view动态绑定一个key，以达到强制重新渲染的目的。监听$route的变化，每次路由切换时开启loading状态，并改变key的值，以更新router-view的内容。mounted函数中，将loading状态设置为false，表示路由切换完成。

1. 在打包过程中，将各个页面组件的js文件名添加hash值，实现浏览器缓存文件版本的更新。具体代码示例：

webpack.prod.config.js

output: {
  path: path.resolve(__dirname, '../dist'),
  filename: '[name].[chunkhash].js',
  chunkFilename: '[id].[chunkhash].js'
}

通过上述方法，在vue-router懒加载时下载js的过程中添加loading提示，可以有效避免无响应问题，并且在网站更新时用户可以及时获取到最新版本的组件文件。