VueJS: Định tuyến và tách mã

Các khóa học qua video:

Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript

Học trên YouTube <76K/tháng. Đăng ký Hội viên

Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Định tuyến với `vue-router`

Bạn có thể nhận thấy rằng mã máy chủ của chúng tôi sử dụng trình xử lý * để chấp nhận các URL tùy ý. Điều này cho phép chúng ta chuyển URL đã truy cập vào ứng dụng Vue của chúng ta và tái sử dụng cùng một cấu hình định tuyến cho cả máy khách và máy chủ!

Bạn nên sử dụng vue-router cho mục đích này. Trước tiên, hãy tạo một tệp nơi chúng ta tạo router. Lưu ý tương tự với createApp, chúng ta cũng cần một đối tượng router mới cho mỗi yêu cầu, do đó, tệp sẽ xuất một hàm createRouter:

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      // ...
    ]
  })
}

Và cập nhật app.js:

// app.js
import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'

export function createApp () {
  // create router instance
  const router = createRouter()

  const app = new Vue({
    // inject router into root Vue instance
    router,
    render: h => h(App)
  })

  // return both the app and the router
  return { app, router }
}

Bây giờ chúng ta cần triển khai logic định tuyến phía máy chủ trong entry-server.js:

// entry-server.js
import { createApp } from './app'

export default context => {
  // vì có thể có các hook hoặc thành phần route không đồng bộ,
  // nên ta sẽ trả về một Promise để server có thể chờ cho tới khi
  // mọi thứ sẵn sàng trước khi render.
  return new Promise((resolve, reject) => {
    const { app, router } = createApp()

    // thiết lập vị trí cho router server-side
    router.push(context.url)

    // chờ đến khi router giải quyết xong các thành phần và hook không đồng bộ
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // các route không tương thích sẽ trả về 404
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }

      // Promise cần giải quyết đối tượng app nên nó có thể được render
      resolve(app)
    }, reject)
  })
}

Giả sử gói máy chủ đã được xây dựng (một lần nữa, bỏ qua thiết lập xây dựng bây giờ), việc sử dụng máy chủ sẽ giống như sau:

// server.js
const createApp = require('/path/to/built-server-bundle.js')

server.get('*', (req, res) => {
  const context = { url: req.url }

  createApp(context).then(app => {
    renderer.renderToString(app, (err, html) => {
      if (err) {
        if (err.code === 404) {
          res.status(404).end('Page not found')
        } else {
          res.status(500).end('Internal Server Error')
        }
      } else {
        res.end(html)
      }
    })
  })
})

Mã-Tách

Phần tách mã hoặc tải xuống phần mềm của ứng dụng giúp giảm số lượng nội dung cần được trình duyệt tải xuống để hiển thị ban đầu và có thể cải thiện đáng kể TTI (time-to-interactive - thời gian tương tác) cho các ứng dụng có gói lớn. Điều quan trọng là "chỉ tải những gì cần thiết" cho màn hình ban đầu.

Vue cung cấp các thành phần không đồng bộ như là một khái niệm hạng nhất, kết hợp nó với sự hỗ trợ của webpack 2 để sử dụng nhập động như một điểm phân tách mã , tất cả những gì bạn cần làm là:

// changing this...
import Foo from './Foo.vue'

// to this:
const Foo = () => import('./Foo.vue')

Trước Vue 2.5, điều này chỉ làm việc cho các thành phần cấp route. Tuy nhiên, với các cải tiến đối với thuật toán hydrat hóa lõi trong 2.5+, điều này hiện hoạt động liên tục ở bất kỳ đâu trong ứng dụng của bạn.

Lưu ý rằng vẫn còn cần thiết để sử dụng router.onReady trên cả máy chủ và máy khách trước khi trở về / gắn ứng dụng, vì router phải giải quyết các thành phần route không đồng bộ trước thời hạn để gọi đúng các hook trong thành phần. Chúng ta đã làm điều đó trong mục nhập máy chủ của chúng ta và bây giờ chúng ta chỉ cần cập nhật mục nhập ứng dụng khách:

// entry-client.js

import { createApp } from './app'

const { app, router } = createApp()

router.onReady(() => {
  app.$mount('#app')
})

Ví dụ về cấu hình route với các thành phần route không đồng bộ:

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: () => import('./components/Home.vue') },
      { path: '/item/:id', component: () => import('./components/Item.vue') }
    ]
  })
}

» Tiếp: Tìm nạp trước dữ liệu và State

« Trước: Cấu trúc mã nguồn