路由和代码分割

使用 vue-router 的路由

你可能已经注意到，我们的服务器代码使用了一个 * 处理程序，它接受任意 URL。这允许我们将访问的 URL 传递到我们的 Vue 应用程序中，然后对客户端和服务器复用相同的路由配置！

为此，建议使用官方提供的 vue-router。我们首先创建一个文件，在其中创建 router。注意，类似于 createApp，我们也需要给每个请求一个新的 router 实例，所以文件导出一个 createRouter 函数：

  1. // router.js
  2. import Vue from 'vue'
  3. import Router from 'vue-router'
  5. Vue.use(Router)
  7. export function createRouter () {
  8.   return new Router({
  9.     mode: 'history',
  10.     routes: [
  11.       // ...
  12.     ]
  13.   })
  14. }

然后更新 app.js:

  1. // app.js
  2. import Vue from 'vue'
  3. import App from './App.vue'
  4. import { createRouter } from './router'
  6. export function createApp () {
  7.   // 创建 router 实例
  8.   const router = createRouter()
  10.   const app = new Vue({
  11.     // 注入 router 到根 Vue 实例
  12.     router,
  13.     render: h => h(App)
  14.   })
  16.   // 返回 app 和 router
  17.   return { app, router }
  18. }

现在我们需要在 entry-server.js 中实现服务器端路由逻辑 (server-side routing logic)：

  1. // entry-server.js
  2. import { createApp } from './app'
  4. export default context => {
  5.   // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
  6.     // 以便服务器能够等待所有的内容在渲染前，
  7.     // 就已经准备就绪。
  8.   return new Promise((resolve, reject) => {
  9.     const { app, router } = createApp()
  11.     // 设置服务器端 router 的位置
  12.     router.push(context.url)
  14.     // 等到 router 将可能的异步组件和钩子函数解析完
  15.     router.onReady(() => {
  16.       const matchedComponents = router.getMatchedComponents()
  17.       // 匹配不到的路由，执行 reject 函数，并返回 404
  18.       if (!matchedComponents.length) {
  19.         return reject({ code: 404 })
  20.       }
  22.       // Promise 应该 resolve 应用程序实例，以便它可以渲染
  23.       resolve(app)
  24.     }, reject)
  25.   })
  26. }

假设服务器 bundle 已经完成构建（请再次忽略现在的构建设置），服务器用法看起来如下：

  1. // server.js
  2. const createApp = require('/path/to/built-server-bundle.js')
  4. server.get('*', (req, res) => {
  5.   const context = { url: req.url }
  7.   createApp(context).then(app => {
  8.     renderer.renderToString(app, (err, html) => {
  9.       if (err) {
  10.         if (err.code === 404) {
  11.           res.status(404).end('Page not found')
  12.         } else {
  13.           res.status(500).end('Internal Server Error')
  14.         }
  15.       } else {
  16.         res.end(html)
  17.       }
  18.     })
  19.   })
  20. })

代码分割

应用程序的代码分割或惰性加载，有助于减少浏览器在初始渲染中下载的资源体积，可以极大地改善大体积 bundle 的可交互时间(TTI - time-to-interactive)。这里的关键在于，对初始首屏而言，”只加载所需”。

Vue 提供异步组件作为第一类的概念，将其与 webpack 2 所支持的使用动态导入作为代码分割点相结合，你需要做的是：

  1. // 这里进行修改……
  2. import Foo from './Foo.vue'
  4. // 改为这样：
  5. const Foo = () => import('./Foo.vue')

在 Vue 2.5 以下的版本中，服务端渲染时异步组件只能用在路由组件上。然而在 2.5+ 的版本中，得益于核心算法的升级，异步组件现在可以在应用中的任何地方使用。

需要注意的是，你仍然需要在挂载 app 之前调用 router.onReady，因为路由器必须要提前解析路由配置中的异步组件，才能正确地调用组件中可能存在的路由钩子。这一步我们已经在我们的服务器入口 (server entry) 中实现过了，现在我们只需要更新客户端入口 (client entry)：

  1. // entry-client.js
  3. import { createApp } from './app'
  5. const { app, router } = createApp()
  7. router.onReady(() => {
  8.   app.$mount('#app')
  9. })

异步路由组件的路由配置示例：

  1. // router.js
  2. import Vue from 'vue'
  3. import Router from 'vue-router'
  5. Vue.use(Router)
  7. export function createRouter () {
  8.   return new Router({
  9.     mode: 'history',
  10.     routes: [
  11.       { path: '/', component: () => import('./components/Home.vue') },
  12.       { path: '/item/:id', component: () => import('./components/Item.vue') }
  13.     ]
  14.   })
  15. }