NUXT.js 笔记 - 路由 (Routing)

在这边将介绍不同型态的Routing

常用的有这几种：Basic、Dynamic、Nested

因为Nuxt封装了路由的生成，所以你不需要额外编写路由(vue-router)，只需要管理好
pages文件夹下的结构，将会自动生成对应的路由。

从核心原始码中可以看到，路由的生成主要是在lib/build.js里面处理的，大致步骤如下：

通过glob获取pages下所有文件，得到数组过滤掉pages和.vue等不相关的字符串对带有_符号进行处理处理动态路由和嵌套路由对子路由排序

接下来我们来详细介绍一下，各种路由该如何使用吧

基本静态路由配置

可以直接于pages资料夹下建置新的页面或是资料夹即可
结构图:

pages/--| user/-----| index.vue-----| one.vue--| index.vue

将会自动生成此路由配置:

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'    }  ]}

这边很单纯就如同档案上的意思，他会透过你网址所输入的path找到相对应的component，其中name则为它的命名，可使用以下方式进行编写:

//编程式this.$router.push({ name:'user-one' })//声明式<nuxt-link :to="{ name:'user-one' }"></nuxt-link>

这边所编译出来的name会以-来做分隔，若要更换可以在config档中设定router.routeNameSplitter

动态路由配置

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。

基本的动态配置

pages/--| _slug/-----| comments.vue-----| index.vue--| users/-----| _id.vue--| index.vue

编译出来后的vue-router为:

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'    }  ]}

这边大致上与静态的结构相同，若对vue-router较为不熟的朋友，可能会较不理解:id跟:slug的意思，简单来说就是可以透过网址传递的params，如下:

模式匹配路径$route.paramscomponent/:slug/comments/gold/comments{ slug: 'gold' }pages/_slug/comments.vue/users/:id/users/123{ id: 123 }pages/users/_id.vue

####动态崁入配置

pages/--| _category/-----| _subCategory/--------| _id.vue--------| index.vue-----| _subCategory.vue-----| index.vue--| _category.vue--| index.vue

编译出来后的vue-router为 :

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'            }          ]        }      ]    }  ]}

这边要特别说明一下children这边render出来的画面，会是先将父阶的component呈现出来后，再由父阶中的所编写的<nuxt-child/>位置render出children中所对应的component。

总结

Nuxt将原本需要编写在vue-router中的规则，以pages这个资料夹中的资料结构自动产生，其中以_表示原vue-router中的:动态参数，且若有崁入关西的路由，则以资料夹与同层且同名的的形式表示，如上方的pages里的**_category资料夹**下的档案 与 _category.vue 的结构关係。