怎么使用vue路由跳转页面，在没网络的情况下

Question

function updateOnlineStatus(event) {

  if (!navigator.onLine) {
    router.push('/networkError');
  }
}
window.addEventListener('offline', updateOnlineStatus);



这个是在路由里面写的
在关闭网络的情况下就是跳不了

Answer 1

通过实践，是可以在router.js里使用window的；
最后的解决方案是这样子
方法一：

// 路由里面的代码  
{
    path: '/networkError',
    component: require('@/views/index/networkError.vue').default, 
    name: '网络异常',
    meta: { title: '网络异常' } 
},

不要使用路由懒加载，这样会动态加载组件，在断网情况下，自然行不通，直接用request引进来。
然后再用navigator.onLine来判断

 window.addEventListener('offline', () => {
      if (!navigator.onLine) {
        router.push('/networkError');
      }
    });

提示，这不是最好的解决方案，因为当有wifi却没有网络时，这个就不行了

方法二：
使用vuex+axios拦截器
这种方法我只讲下思路：

在vuex里存储一个全局变量，先设置为true,再在request.js里的axios拦截器里改变它的值，当获取不到数据时（这点比方法一要好），就设置为false,使用vuex的store.commit来更新。

然后在用app.vue，使用这个变量，使用v-if来决定提示用户连接网络的图片要不要出现。

当实话实说其实这种方法不是很好，因为vuex被大材小用了，而且，app.vue就该什么都没有。当然，如果实在想用这种方法，浪费Vuex，那可以新建一个networkError.vue文件，当断网时就跳进这个页面。

这两个方法都不是最佳的解决方案，如果大佬有更好的解决办法，教教我吧

Answer 2

这个是在路由里面写的

不清楚你这句话是什么意思，路由里面有window?要么在入口组件上写，要么在入口组件上写，要么用全局mixin，跳不跳本身和vue没什么关系。

https://codepen.io/a631807682...

Answer 3

去你的router.js中，看看定义