VueJS: Định tuyến

Nuxt.js automatically configures the vue-router bases on your Vue file tree in pages directory.

Example:

<template>
  <nuxt-link to="/">Home page</nuxt-link>
</template>

Base routes

This file tree:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

will auto create:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Dynamic route

To define the dynamic route with one parameter, you need to define .vue file OR a directory with underscore prefix.

This file tree:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

will auto create:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

As you saw, the route with users-id named has path :id? makes it has an option, if you want make it to be required, you create an index.vue file in users/_id directory.

Route Params authenticating

Nuxt.js allows you to define an authenticate method in its dynamic route component.

In this example: pages/users/_id.vue

export default {
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
}

If the method does not return true then either Promise solves true or throws an Error, Nuxt.js will auto load the 404 error page or the 500 error page in case error.

More info about the authenticate method: Authenticate API page

Nest routes

Nuxt.js allows you to create nest routes by using sub-routes of vue-router.

To define the parent component of nest routes, you need to create Vue file with same name with the directory that contains your views.

This file tree:

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

will auto create:

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

Dynamic nest routes

This script should not happen oftenKịch bản này không nên xảy ra thường xuyên, nhưng có thể xảy ra với Nuxt.js: có con năng động bên trong cha mẹ năng động.

Cây tập tin này:

pages/
--| _category/
-----| _subCategory/
--------| _id.vue
--------| index.vue
-----| _subCategory.vue
-----| index.vue
--| _category.vue
--| index.vue

sẽ tự động tạo:

router: {
  routes: [
    {
      path: '/',
      component: 'pages/index.vue',
      name: 'index'
    },
    {
      path: '/:category',
      component: 'pages/_category.vue',
      children: [
        {
          path: '',
          component: 'pages/_category/index.vue',
          name: 'category'
        },
        {
          path: ':subCategory',
          component: 'pages/_category/_subCategory.vue',
          children: [
            {
              path: '',
              component: 'pages/_category/_subCategory/index.vue',
              name: 'category-subCategory'
            },
            {
              path: ':id',
              component: 'pages/_category/_subCategory/_id.vue',
              name: 'category-subCategory-id'
            }
          ]
        }
      ]
    }
  ]
}

Các tuyến lồng nhau không xác định

Nếu bạn không biết độ sâu của cấu trúc URL, bạn có thể sử dụng _.vueđể khớp động với các đường dẫn lồng nhau. Điều này sẽ xử lý các yêu cầu không phù hợp với một yêu cầu cụ thể hơn .

Cây tập tin này:

pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue

Sẽ xử lý các yêu cầu như thế này:

Lưu ý: Xử lý các trang 404 hiện theo logic của _.vuetrang. Thông tin thêm về chuyển hướng 404 có thể được tìm thấy ở đây .

Lượt xem được đặt tên

Để hiển thị các chế độ xem được đặt tên, bạn có thể sử dụng <nuxt name="top"/>hoặc <nuxt-child name="top"/>các thành phần trong bố cục / trang của mình. Để chỉ định chế độ xem được đặt tên của trang, chúng tôi cần mở rộng cấu hình bộ định tuyến trong nuxt.config.jstệp:

export default {
  router: {
    extendRoutes(routes, resolve) {
      let index = routes.findIndex(route => route.name === 'main')
      routes[index] = {
        ...routes[index],
        components: {
          default: routes[index].component,
          top: resolve(__dirname, 'components/mainTop.vue')
        },
        chunkNames: {
          top: 'components/mainTop'
        }
      }
    }
  }
}

Nó đòi hỏi phải mở rộng tuyến quan tâm với 2 thuộc tính componentsvà chunkNames. Chế độ xem được đặt tên trong ví dụ cấu hình này có tên top.

Để xem một ví dụ, hãy xem ví dụ về các khung nhìn được đặt tên .

Dự phòng SPA

Bạn cũng có thể bật dự phòng SPA cho các tuyến động. Nuxt.js sẽ xuất ra một tệp bổ sung giống như tệp index.htmlsẽ được sử dụng trong mode: 'spa'. Hầu hết các dịch vụ lưu trữ tĩnh có thể được cấu hình để sử dụng mẫu SPA nếu không có tệp nào khớp. Nó sẽ không bao gồm headthông tin hoặc bất kỳ HTML nào, nhưng nó vẫn sẽ giải quyết và tải dữ liệu từ API.

Chúng tôi kích hoạt điều này trong nuxt.config.jstập tin của chúng tôi :

export default {
  generate: {
    fallback: true, // if you want to use '404.html' instead of the default '200.html'
    fallback: 'my-fallback/file.html' // if your hosting needs a custom location
  }
}

Thực hiện cho Surge

Surge có thể xử lý cả 200.htmlvà 404.html. generate.fallbackđược đặt thành 200.htmlmặc định, vì vậy không cần thay đổi nó.

Triển khai cho các trang GitHub và Netlify

GitHub Pages và Netlify nhận ra 404.htmltập tin tự động, do đó thiết lập generate.fallbackđể trueđược tất cả chúng ta phải làm!

Triển khai cho Firebase Hosting

Để sử dụng dự phòng trên Hosting căn cứ hỏa lực, cấu hình generate.fallbackđến truevà sử dụng các cấu hình sau ( biết thêm ):

{
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/404.html"
      }
    ]
  }
}

Chuyển tiếp

Nuxt.js sử dụng <transition>thành phần này để cho phép bạn tạo các hiệu ứng chuyển cảnh / hoạt hình tuyệt vời giữa các tuyến đường của mình.

Thiết lập toàn cầu

Để thêm chuyển tiếp mờ dần cho mỗi trang trong ứng dụng của bạn, chúng tôi cần một tệp CSS được chia sẻ trên tất cả các tuyến đường của chúng tôi, vì vậy chúng tôi bắt đầu bằng cách tạo một tệp trong assetsthư mục.

Css toàn cầu của chúng tôi trong assets/main.css:

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

Sau đó, chúng tôi thêm đường dẫn của nó vào cssmảng trong nuxt.config.jstệp của chúng tôi :

export default {
  css: [
    '~/assets/main.css'
  ]
}

Thông tin thêm về khóa chuyển đổi: Chuyển đổi cấu hình API

Cài đặt trang

Bạn cũng có thể xác định chuyển đổi tùy chỉnh cho một trang cụ thể với thuộc transitiontính.

Chúng tôi thêm một lớp mới trong css toàn cầu của chúng tôi trong assets/main.css:

.test-enter-active, .test-leave-active {
  transition: opacity .5s;
}
.test-enter, .test-leave-active {
  opacity: 0;
}

Sau đó, chúng tôi sử dụng thuộc tính chuyển đổi để xác định tên lớp sẽ sử dụng cho quá trình chuyển đổi trang này:

export default {
  transition: 'test'
}

Thông tin thêm về thuộc tính chuyển đổi: Chuyển đổi trang API

Middleware

Middleware cho phép bạn xác định các chức năng tùy chỉnh có thể chạy trước khi hiển thị một trang hoặc một nhóm các trang.

Mỗi phần mềm trung gian nên được đặt trong middleware/thư mục. Tên tệp sẽ là tên của phần mềm trung gian ( middleware/auth.jssẽ là authphần mềm trung gian).

Một phần mềm trung gian nhận bối cảnh là đối số đầu tiên:

export default function (context) {
  context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}

Trong chế độ phổ quát, phần mềm trung gian sẽ được gọi là phía máy chủ một lần (theo yêu cầu đầu tiên đối với ứng dụng Nuxt hoặc khi làm mới trang) và phía máy khách khi điều hướng đến các tuyến tiếp theo. Trong chế độ SPA, phần mềm trung gian sẽ được gọi là phía máy khách theo yêu cầu đầu tiên và khi điều hướng đến các tuyến tiếp theo.

Phần mềm trung gian sẽ được thực hiện theo chuỗi theo thứ tự sau:

1. nuxt.config.js (theo thứ tự trong tập tin)
2. Bố trí phù hợp
3. Trang phù hợp

Một phần mềm trung gian có thể không đồng bộ. Để làm điều này, chỉ cần trả về một Promisehoặc sử dụng callbackđối số thứ 2 :

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

Sau đó, trong của bạn nuxt.config.js, sử dụng router.middlewarephím:

export default {
  router: {
    middleware: 'stats'
  }
}

Bây giờ statsphần mềm trung gian sẽ được gọi cho mỗi thay đổi tuyến đường.

Bạn cũng có thể thêm phần mềm trung gian của mình vào một bố cục hoặc trang cụ thể:

pages/index.vue hoặc là layouts/default.vue

export default {
  middleware: 'stats'
}

Để xem ví dụ thực tế sử dụng phần mềm trung gian, vui lòng xem ví dụ-auth0 trên GitHub.