Nuxt.js 路由
Nuxt.js 依据 pages 目录结构 模块的路由配置。
要在之间使用路由，我们建议使用<nuxt-link> 。
例如:
<template> <nuxt-link to="/"></nuxt-link> </template>
基础路由
假设 pages 的目录结构如下：
pages/ --| user/ -----| index.vue -----| one.vue --| index.vue
那么，Nuxt.js 的路由配置如下：
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'
}
]
}
动态路由
在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 或 目录。
以下目录结构：
pages/ --| _slug/ -----| comments.vue -----| index.vue --| users/ -----| _id.vue --| index.vue
Nuxt.js 对应的路由配置表为：
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'
}
]
}
你会发现为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建 index.vue 。
：API Conuration generate
警告：generate 命令会忽略动态路由:
Nuxt.js 可以让你在动态路由组件中校验。
举个例子： pages/users/_id.vue
export default {
validate ({ params }) {
// 必须是number类型
return /^\d+$/.test(params.id)
}
}
如果校验返回的值不为 true或Promise中resolve 解析为false或抛出Error ， Nuxt.js 将加载 或 500 。
想了解关于路由的信息，请参考 校验API。
嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要 Vue ，同时与该同名的目录用来存放子视图组件。
Warning: 别忘了在父组件(.vue) 内 <nuxt-child/> 用于子视图。
假设结构如：
pages/ --| users/ -----| _id.vue -----| index.vue --| users.vue
Nuxt.js 的路由配置如下：
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'
}
]
}
]
}
动态嵌套路由
这个应用场景比较少见，但是 Nuxt.js 仍然：在动态路由下配置动态子路由。
假设结构如下：
pages/ --| _category/ -----| _subCategory/ --------| _id.vue --------| index.vue -----| _subCategory.vue -----| index.vue --| _category.vue --| index.vue
Nuxt.js 的路由配置如下：
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'
}
]
}
]
}
]
}
如果您不知道URL结构的深度，您可以使用_.vue动态匹配嵌套路径。这将处理与更具体请求不匹配的情况。
结构:
pages/ --| people/ -----| _id.vue -----| index.vue --| _.vue --| index.vue
将处理这样的请求：
Note: 处理，现在符合_.vue的逻辑。
要渲染命名视图，您可以在布局(layout) / (page)中使用 <nuxt name="top"/> 或 <nuxt-child name="top"/> 组件。要的命名视图，我们需要在nuxt.con.js中扩展路由器配置：
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'
}
}
}
}
}
它需要使用两个 components 和 chunkNames 扩展路由。此配置示例中的命名视图为 top 。
您也可以为动态路由启用SPA fallback。在使用mode:'spa'模式下，Nuxt.js将与index.html相同的额外。如果没有匹配，大多数静态托管服务可以配置为使用SPA模板。不包含头信息或任何HTML，但它仍将解析并加载API中的数据。
我们在nuxt.con.js中启用它：
export default {
generate: {
fallback: true, // if you want to use '.html'
fallback: 'my-fallback/file.html' // if your hosting needs a custom location
}
}
Surge 200.html 和 .html，generate.fallback认设置为200.html，因此无需更改它。
GitHub Pages 和 Netlify 识别 .html，所以我们需的就是将 generate.fallback 设置为 true！
要在Firebase Hosting上使用，请将 generate.fallback 配置为 true 并使用以下配置()：
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/.html"
}
]
}
}
过渡动效
Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。
:Nuxt.js 认使用的过渡为 page
如果想让每的切换都有淡出 (fade) ，我们需要创建所有路由共用的 CSS 。所以我们可以在 assets/ 目录下创建这个：
在全局样式 assets/main.css 里一下样式：
.page-enter-active, .page-leave-active {
transition: opacity .5s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
然后到 nuxt.con.js 中：
module.exports = {
css: [
'assets/main.css'
]
}
关于过渡 transition 配置的更多信息可参看 过渡API。
如果想给某个过渡特效的话，只要在该组件中配置 transition 字段即可：
在全局样式 assets/main.css 中一下：
.test-enter-active, .test-leave-active {
transition: opacity .5s;
}
.test-enter, .test-leave-active {
opacity: 0;
}
然后我们将组件中的 transition 的值设置为 test 即可：
export default {
transition: 'test'
}
关于过渡 transition 配置的更多信息可参看 过渡API。
中间件
中间件允许您定义运行在或一组渲染之前。
每中间件应放置在 middleware/ 目录。名的将成为中间件(middleware/auth.js将成为 auth 中间件)。
中间件接收 context 作为第参数：
export default function (context) {
context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
}
中间件执行流程顺序：
nuxt.con.js
匹配布局
匹配
中间件可以异步执行,只需要返回 Promise 或使用第2个 callback 作为第参数：
middleware/stats.js
import axios from 'axios'export default function ({ route }) { return axios.post('http://my-stats-api.com', { url: route.fullPath
})
}
然后在你的 nuxt.con.js 、 layouts 或者 pages 中使用中间件:
nuxt.con.js
module.exports = {
router: {
middleware: 'stats'
}
}
现在，stats 中间件将在每个路由改变时被。
您也可以将 middleware 到指定的布局或者:
pages/index.vue 或者 layouts/default.vue
export default {
middleware: 'stats'
}
如果你想看到使用中间件的真实例子，请参阅在 GitHub 上的。
602392714
清零编程群