NUXT:路由
路由
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.vueNuxt.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.vueNuxt.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.vueNuxt.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)求:
| / | 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í)行流程順序:
中間件可以異步執(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: 视图和模板
- 下一篇: Chrome报错:Unchecked r