路由

Nuxt.js 依據(jù)?pages?目錄結(jié)構(gòu)自動(dòng)生成?vue-router?模塊的路由配置。

要在頁(yè)面之間使用路由，我們建議使用<nuxt-link>?標(biāo)簽。

例如:

<template><nuxt-link to="/">首頁(yè)</nuxt-link> </template>

基礎(chǔ)路由

假設(shè)?pages?的目錄結(jié)構(gòu)如下：

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

那么，Nuxt.js 自動(dòng)生成的路由配置如下：

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'}] }

動(dòng)態(tài)路由

在 Nuxt.js 里面定義帶參數(shù)的動(dòng)態(tài)路由，需要?jiǎng)?chuàng)建對(duì)應(yīng)的以下劃線作為前綴的 Vue 文件 或 目錄。

觀看Vue School出品的?動(dòng)態(tài)路由?免費(fèi)課程

以下目錄結(jié)構(gòu)：

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

Nuxt.js 生成對(duì)應(yīng)的路由配置表為：

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'}] }

你會(huì)發(fā)現(xiàn)名稱為?users-id?的路由路徑帶有?:id??參數(shù)，表示該路由是可選的。如果你想將它設(shè)置為必選的路由，需要在?users/_id?目錄內(nèi)創(chuàng)建一個(gè)?index.vue?文件。

：API Configuration generate

警告：generate?命令會(huì)忽略動(dòng)態(tài)路由:?API Configuration generate

路由參數(shù)校驗(yàn)

Nuxt.js 可以讓你在動(dòng)態(tài)路由組件中定義參數(shù)校驗(yàn)方法。

舉個(gè)例子：?pages/users/_id.vue

export default {validate ({ params }) {// 必須是number類型return /^\d+$/.test(params.id)} }

如果校驗(yàn)方法返回的值不為?true或Promise中resolve 解析為false或拋出Error ， Nuxt.js 將自動(dòng)加載顯示 404 錯(cuò)誤頁(yè)面或 500 錯(cuò)誤頁(yè)面。

想了解關(guān)于路由參數(shù)校驗(yàn)的信息，請(qǐng)參考?頁(yè)面校驗(yàn)API。

嵌套路由

你可以通過 vue-router 的子路由創(chuàng)建 Nuxt.js 應(yīng)用的嵌套路由。

創(chuàng)建內(nèi)嵌子路由，你需要添加一個(gè) Vue 文件，同時(shí)添加一個(gè)與該文件同名的目錄用來存放子視圖組件。

Warning:?別忘了在父組件(.vue文件) 內(nèi)增加?<nuxt-child/>?用于顯示子視圖內(nèi)容。

假設(shè)文件結(jié)構(gòu)如：

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

Nuxt.js 自動(dòng)生成的路由配置如下：

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'}]}] }

動(dòng)態(tài)嵌套路由

這個(gè)應(yīng)用場(chǎng)景比較少見，但是 Nuxt.js 仍然支持：在動(dòng)態(tài)路由下配置動(dòng)態(tài)子路由。

假設(shè)文件結(jié)構(gòu)如下：

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

Nuxt.js 自動(dòng)生成的路由配置如下：

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'}]}]}] }

未知嵌套深度的動(dòng)態(tài)嵌套路由

如果您不知道URL結(jié)構(gòu)的深度，您可以使用_.vue動(dòng)態(tài)匹配嵌套路徑。這將處理與更具體請(qǐng)求不匹配的情況。

文件結(jié)構(gòu):

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

將處理這樣的請(qǐng)求：

PathFile

/	index.vue
/people	people/index.vue
/people/123	people/_id.vue
/about	_.vue
/about/careers	_.vue
/about/careers/chicago	_.vue

Note:?處理404頁(yè)面，現(xiàn)在符合_.vue頁(yè)面的邏輯。?有關(guān)404重定向的更多信息，請(qǐng)點(diǎn)擊此處.

命名視圖

要渲染命名視圖，您可以在布局(layout) / 頁(yè)面(page)中使用?<nuxt name="top"/>?或?<nuxt-child name="top"/>?組件。要指定頁(yè)面的命名視圖，我們需要在nuxt.config.js文件中擴(kuò)展路由器配置：

export default {router: {extendRoutes (routes, resolve) {const 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'}}}} }

它需要使用兩個(gè)屬性?components?和?chunkNames?擴(kuò)展路由。此配置示例中的命名視圖名稱為?top?。看一個(gè)例子:命名視圖 例子。

SPA fallback

您也可以為動(dòng)態(tài)路由啟用SPA fallback。在使用mode:'spa'模式下，Nuxt.js將輸出一個(gè)與index.html相同的額外文件。如果沒有文件匹配，大多數(shù)靜態(tài)托管服務(wù)可以配置為使用SPA模板。生成文件不包含頭信息或任何HTML，但它仍將解析并加載API中的數(shù)據(jù)。

我們?cè)趎uxt.config.js文件中啟用它：

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

在Surge上實(shí)現(xiàn)

Surge?可以處理200.html?和?404.html，generate.fallback默認(rèn)設(shè)置為200.html，因此無需更改它。

在 GitHub Pages 和 Netlify 上實(shí)現(xiàn)

GitHub Pages 和 Netlify 自動(dòng)識(shí)別?404.html文件，所以我們需要做的就是將?generate.fallback?設(shè)置為?true！

在 Firebase Hosting 上實(shí)現(xiàn)

要在Firebase Hosting上使用，請(qǐng)將?generate.fallback?配置為?true?并使用以下配置(more info)：

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

過渡動(dòng)效

Nuxt.js 使用 Vue.js 的<transition>組件來實(shí)現(xiàn)路由切換時(shí)的過渡動(dòng)效。

全局過渡動(dòng)效設(shè)置

提示 :Nuxt.js 默認(rèn)使用的過渡效果名稱為?page

如果想讓每一個(gè)頁(yè)面的切換都有淡出 (fade) 效果，我們需要?jiǎng)?chuàng)建一個(gè)所有路由共用的 CSS 文件。所以我們可以在?assets/?目錄下創(chuàng)建這個(gè)文件：

在全局樣式文件?assets/main.css?里添加一下樣式：

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

然后添加到?nuxt.config.js?文件中：

module.exports = {css: ['assets/main.css'] }

關(guān)于過渡效果?transition?屬性配置的更多信息可參看?頁(yè)面過渡效果API。

頁(yè)面過渡動(dòng)效設(shè)置

如果想給某個(gè)頁(yè)面自定義過渡特效的話，只要在該頁(yè)面組件中配置?transition?字段即可：

在全局樣式?assets/main.css?中添加一下內(nèi)容：

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

然后我們將頁(yè)面組件中的?transition?屬性的值設(shè)置為?test?即可：

export default {transition: 'test' }

關(guān)于過渡效果?transition?屬性配置的更多信息可參看?頁(yè)面過渡效果API。

中間件

中間件允許您定義一個(gè)自定義函數(shù)運(yùn)行在一個(gè)頁(yè)面或一組頁(yè)面渲染之前。

每一個(gè)中間件應(yīng)放置在?middleware/?目錄。文件名的名稱將成為中間件名稱(middleware/auth.js將成為?auth?中間件)。

一個(gè)中間件接收?context?作為第一個(gè)參數(shù)：

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

中間件執(zhí)行流程順序：

nuxt.config.js

匹配布局

匹配頁(yè)面

中間件可以異步執(zhí)行,只需要返回一個(gè)?Promise?或使用第2個(gè)?callback?作為第一個(gè)參數(shù)：

middleware/stats.js

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

然后在你的?nuxt.config.js?、 layouts 或者 pages 中使用中間件:

nuxt.config.js

module.exports = {router: {middleware: 'stats'} }

現(xiàn)在，stats?中間件將在每個(gè)路由改變時(shí)被調(diào)用。

您也可以將 middleware 添加到指定的布局或者頁(yè)面:

pages/index.vue?或者?layouts/default.vue

export default {middleware: 'stats' }

如果你想看到一個(gè)使用中間件的真實(shí)例子，請(qǐng)參閱在 GitHub 上的example-auth0。

總結(jié)

以上是生活随笔為你收集整理的NUXT:路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。