vue2如何实现页面预加载

Vue2可以通过Vue Router提供的异步组件和Webpack的代码分割功能来实现页面预加载。

具体实现步骤如下：

1. 在Vue Router中配置异步组件，例如：

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

2. 在Webpack中配置代码分割，例如：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

3. 在Vue组件中使用路由的`<router-link>`标签来触发预加载，例如：

<router-link :to="{ path: '/foo', prefetch: true }">Foo</router-link>

其中，`prefetch: true`表示开启预加载。

通过以上步骤，就可以实现Vue2页面的预加载了。