nuxt.js

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> [TOC] 1、错误页面 1.1、官方文档： 你可以通过编辑 layouts/error.vue 文件来定制化错误页面. 警告: 虽然此文件放在 layouts 文件夹中, 但应该将它看作是一个 页面(page) . 这个布局文件不需要包含 <nuxt/> 标签。你可以把这个布局文件当成是显示应用错误（404，500等）的组件。 举一个个性化错误页面的例子 layouts/error.vue : <template> <div class="container"> <h1 v-if="error.statusCode === 404">页面不存在</h1> <h1 v-else>应用发生错误异常</h1> <nuxt-link to="/">首 页</nuxt-link> </div> </template> <script> export default { props: ['error'], layout: 'blog' // 你可以为错误页面指定自定义的布局 } </script> 1.2、实际操作(实例练习) 1.2.1、建立错误页面 layouts/error.vue <template> <div class="container"> <h1 v-if="error.statusCode ===

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> [TOC] 1、布局 1.1、官方文档: 默认布局 可通过添加 layouts/default.vue 文件来扩展应用的默认布局。 提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。 默认布局的源码如下： <template> <nuxt/> </template> 自定义布局 layouts 目录中的每个文件 ( 顶级 ) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。 假设我们要创建一个 博客布局 并将其保存到 layouts/blog.vue : <template> <div> <div>我的博客导航栏在这里</div> <nuxt/> </div> </template> 然后我们必须告诉页面 (即 pages/posts.vue ) 使用您的自定义布局： 1.2、实际操作(练习实例) 1.2.1、在layouts下新建一个layout.vue，写入以下代码 <template> <div> <p> <a href="https://my.oschina.net/tingqianyunluo">庭前云落的博客</a> </p> <nuxt /> </div> </template> 1.2.2、在主页面导入 <template> <div> <ul>

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> [TOC] 1、Nuxt.js过渡动效 1.1、官方文档： Nuxt.js 使用 Vue.js 的<transition>组件来实现路由切换时的过渡动效。 也称为页面的更换效果，Nuxt.js提供两种方法为路由提供动画效果，一种为全局，一种针对单独页面制作。 全局过渡动效设置 如果想让每一个页面的切换都有淡出 (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 字段即可： 在全局样式 assets/main.css 中添加一下内容： .test-enter-active, .test-leave

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> [TOC] 1、Nuxt的动态路由 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的 以下划线作为前缀 的 Vue 文件 或 目录。 1.1、官方文档： 以下目录结构： 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? 参数