一般在index.js中都是这么引入的组件
import from '@/pages/my'
import Cart from '@/pages/cart'
import Order from '@/pages/order'
import TMap from '@/pages/map'
import New from '@/pages/new'
换成这样就好啦
const My = r => require.ensure([], () => r(require('@/pages/my')), 'my')
const Cart = r => require.ensure([], () =>
在Vue.js中，单页面应用（SPA）是一种常见的前端架构模式，它允许用户在不刷新整个页面的情况下，通过改变URL来加载不同的视图。然而，这种模式的一个常见问题是，当应用启动时，会一次性加载所有的JavaScript文件，这可能导致首屏加载时间过长，影响用户体验。本文将探讨如何解决这个问题，并介绍相关的Vue Router知识。
我们来看标题提到的问题："解决vue单页面应用进入页面加载所有 js 的问题"。通常，开发者会在`index.js`等主入口文件中静态导入所有页面组件，例如：
```javascript
import My from '@/pages/my'
import Cart from '@/pages/cart'
import Order from '@/pages/order'
import TMap from '@/pages/map'
import New from '@/pages/new'
```
这种方式会导致浏览器在初始化时一次性下载所有页面的代码，即使这些页面可能在首次加载时并不会被访问。为了解决这个问题，我们可以采用异步加载（懒加载）策略。Vue Router 提供了动态导入（`require.ensure`或`import()`）的功能，允许我们在实际需要某个组件时才加载它。例如：
```javascript
const My = r => require.ensure([], () => r(require('@/pages/my')), 'my')
const Cart = r => require.ensure([], () => r(require('@/pages/cart')), 'cart')
const Order = r => require.ensure([], () => r(require('@/pages/order')), 'order')
const TMap = r => require.ensure([], () => r(require('@/pages/map')), 'map')
const New = r => require.ensure([], () => r(require('@/pages/new')), 'new')
```
在这里，我们使用了`require.ensure`，它会在运行时按需加载指定的模块，并将它们归类到指定的chunk名（如'my', 'cart'等）。这有助于减少首次加载的资源大小，提高页面加载速度。
接下来，我们讨论与Vue Router相关的知识点。在Vue Router 3.0及以上版本，路由跳转时可能会遇到`NavigationDuplicated`错误。这个错误表示尝试进行重复的导航操作，通常发生在连续调用`$router.push`而没有处理可能的异常时。为了解决这个问题，有几种解决方案：
1. **降级到Vue Router 3.0以下版本**：如果你的项目允许，可以降级到2.8.0或其他旧版本，因为这个警告在3.0以下版本不会出现。
2. **捕获路由跳转异常**：对于3.0及以上版本，你可以通过在`$router.push`后添加`.catch`来捕获并处理异常，如下所示：
```javascript
this.$router.push('/location').catch(err => {
console.log(err)
})
```
3. **全局重写`push`方法**：你也可以在`main.js`中注册一个全局函数来捕获异常，确保每次路由跳转都不会引发警告：
```javascript
import Router from 'vue-router'
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
```
注意，Vue Router的新版本回调返回的是一个Promise，这意味着旧的回调方式将被废弃。因此，保持对新API的理解和使用是非常重要的，这有助于避免潜在的错误和性能问题。
通过合理地使用Vue Router的异步加载功能和妥善处理路由跳转异常，可以显著改善Vue单页面应用的性能，提供更好的用户体验。同时，持续关注Vue Router的更新和最佳实践，以确保代码的健壮性和效率。
