nuxt添加.html,Nuxt.js 路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由,我们建议使用 标签。

例如:

首页

基础路由

假设 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 Configuration generate

路由参数校验

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举个例子: pages/users/_id.vueexport default {

validate ({ params }) {

// 必须是number类型

return /^\d+$/.test(params.id)

}

}

如果校验方法返回的值不为 true或Promise中resolve 解析为false或抛出Error , Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

想了解关于路由参数校验的信息,请参考 页面校验API。

嵌套路由

你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由,你需要添加一个 Vue 文件,同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件(.vue文件) 内增加  用于显示子视图内容。

假设文件结构如: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

将处理这样的请求:PathFile/index.vue

/peoplepeople/index.vue

/people/123people/_id.vue

/about_.vue

/about/careers_.vue

/about/careers/chicago_.vue

Note: 处理404页面,现在符合_.vue页面的逻辑。 有关404重定向的更多信息,请点击此处.

命名视图

要渲染命名视图,您可以在布局(layout) / 页面(page)中使用  或  组件。要指定页面的命名视图,我们需要在nuxt.config.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

您也可以为动态路由启用SPA fallback。在使用mode:'spa'模式下,Nuxt.js将输出一个与index.html相同的额外文件。如果没有文件匹配,大多数静态托管服务可以配置为使用SPA模板。生成文件不包含头信息或任何HTML,但它仍将解析并加载API中的数据。

我们在nuxt.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上实现

Surge 可以处理200.html 和 404.html,generate.fallback默认设置为200.html,因此无需更改它。

在 GitHub Pages 和 Netlify 上实现

GitHub Pages 和 Netlify 自动识别 404.html文件,所以我们需要做的就是将 generate.fallback 设置为 true!

在 Firebase Hosting 上实现

要在Firebase Hosting上使用,请将 generate.fallback 配置为 true 并使用以下配置(more info):{

"hosting": {

"public": "dist",

"ignore": [

"firebase.json",

"**/.*",

"**/node_modules/**"

],

"rewrites": [

{

"source": "**",

"destination": "/404.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.config.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.config.js

匹配布局

匹配页面

中间件可以异步执行,只需要返回一个 Promise 或使用第2个 callback 作为第一个参数:

middleware/stats.jsimport 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.jsmodule.exports = {

router: {

middleware: 'stats'

}

}

现在,stats 中间件将在每个路由改变时被调用。

您也可以将 middleware 添加到指定的布局或者页面:

pages/index.vue 或者 layouts/default.vueexport default {

middleware: 'stats'

}

如果你想看到一个使用中间件的真实例子,请参阅在 GitHub 上的example-auth0。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt.js是一个基于Vue.js的通用应用框架,可以快速构建单页应用和静态网站。它帮助我们在开发过程中进行代码分离、优化性能和部署网站等方面提供了很多便利。 在默认情况下,Nuxt.js使用的是Vue Router进行路由管理,并且路由地址都是没有后缀的,即不带有.html后缀。这是为了在构建出的静态网站中提供更友好的URL形式,提高搜索引擎优化(SEO)的效果。 如果你想要在Nuxt.js路由地址中添加.html后缀,可以通过自定义路由配置的方式来实现。首先,在你的Nuxt.js项目根目录下新建一个`router.js`文件(如果该文件已存在则跳过此步骤)。 然后,打开 `nuxt.config.js` 文件,在 `router` 配置项中加入一行代码 `router: { middleware: 'router' }`。这样,就可以将自定义的路由配置应用到项目中。 在 `router.js` 文件中,你可以使用 Vue Router 的语法来定义路由。在需要添加.html后缀的路由地址上,可以通过 `alias` 字段进行指定。例如: ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export function createRouter() { return new Router({ mode: 'history', routes: [ { path: '/home', alias: '/home.html', component: () => import('~/pages/Home.vue') }, // 其他路由配置... ] }) } ``` 在上述代码中,`alias` 字段指定了 `/home` 路由地址的别名为 `/home.html`。当用户访问 `/home.html` 时,会显示对应的页面内容。 这样,你就可以通过自定义路由配置,将Nuxt.js路由地址添加.html后缀啦!请注意,添加.html后缀可能会影响到默认的Nuxt.js路由功能,所以要根据你的具体需求来决定是否使用该方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值