Nuxt.js之路由介绍

Nuxtjs

2019-02-21

213

0

上一篇 Nuxt.js之快速构建教程

相关demo:https://github.com/lmy01/nuxt_demo

路由介绍

    nuxt.js会根据page文件夹下面的目录结构自动生成vue-router模块的路由配置。要在页面之间使用路由,我们建议使用 标签。

    基础路由:

        

    动态路由:

        

     获取路由路径:$nuxt.$route.path; 获取路由名:$nuxt.$route.name; 获取路由参数:$nuxt.$route.params.参数名

    路由参数校验:

        Nuxt.js支持在动态路由组件中用validate方法进行参数校验,比如在 pages/users/_id.vue

        export default {

            validate ({ params }) {

                // 必须是number类型

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

            }

        }

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

    路由嵌套:

        先添加一个.vue文件,然后再.vue文件的同级目录下创建一个与.vue文件同名的文件夹来存放子视图组件。

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

        

    动态嵌套路由:

        在动态路由下配置动态子路由,这种应用场景较为少见,但Nuxt.js仍然支持。

        

    SPA fallback:

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

        

    过渡动效:

        Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。

        全局过渡动效配置

            提示 :Nuxt.js 默认使用的过渡效果名称为 page

     

    页面过渡动效配置:

     

     关于过渡效果 transition 属性配置的更多信息可参看 页面过渡效果API

   中间件:

     可以自定义一个函数运行在一个或多个页面之前。中间件需要放在/middleware目录下,文件名就是中间件的名称。每个中间件都将接收一个context作为第一个参数,如下图。它也可以异步执行,只需要返回一个 Promise 或使用第2个 callback 作为第一个参数。

     

     中间件的执行流程顺序:nuxt.config.js --> 布局 --> 页面

     官方例子:

     

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

     参考文档:官方路由介绍

 

发表评论

全部评论:0条

lmy233

努力工作学习生活的人呐~~

联系方式

神圣之子仅供学习交流
E-mail:limengyu233@163.com
github:https://github.com/lmy01