DAY3 起手式--Nuxt.js路由设定

Nuxt.js 跟 Vue-Router 是什麽关系？

有使用过 vue-router 的捧由，别紧张，就当作我们用的就是 vue-router 没有错啦！
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
可以理解成 Nuxt.js 给了我们更简洁的方法来使用 vue-router ，那到底有那些一样的地方呢？

标签怎麽用？

• <router-link> === <nuxt-link>
• <router-view /> === <Nuxt />

恭喜我们，学会使用这两个标签，就已经可以顺利在 Nuxt.js 转换页面了(?)

什麽？找不到 router.js 搞不清楚路由到底怎麽配置？
没关系，我们接着讲下去

路由怎麽配置？

路由配置就是一个大原则
pages 目录结构　＝　vue-router 路由配置
所以 router.js 不是不见了，而是 Nuxt.js 会根据我们 pages 的目录结构，来帮我们产出 router.js。
以下用范例来示范罗！

基础路由

假设我目前的网站路由要长这样，那我的 pages 要怎麽设定呢？

第一种

pages/
--| index.vue
--| ClassSchedule.vue
--| Report.vue

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'ClassSchedule',
      path: '/ClassSchedule',
      component: 'pages/ClassSchedule.vue'
    },
    {
      name: 'Report',
      path: '/Report',
      component: 'pages/Report.vue'
    },
  ]
}

第二种

pages/
--| index.vue
--| ClassSchedule/
-----| index.vue
--| Report/
-----| index.vue

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'ClassSchedule',
      path: '/ClassSchedule',
      component: 'pages/ClassSchedule/index.vue'
    },
    {
      name: 'Report',
      path: '/Report',
      component: 'pages/Report/index.vue'
    },
  ]
}

动态路由

那如果我们需要的是动态路由呢？像是这样的配置

需要动态判断班表要提供日班表、周班表、月班表
也需要动态提供不同员工的资料，该怎麽做呢？

过去我们在 router.js 可以使用 :id 设定参数，而在 Nuxt.js 怎麽做？
定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
白话文来说就是，档案名称或资料夹名称前面加上下底线即可。

让我们来实作看看吧！

pages/
--| index.vue
--| ClassSchedule/
-----| _type.vue
--| Report/
-----| _id.vue

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'ClassSchedule',
      path: '/ClassSchedule/:type',
      component: 'pages/ClassSchedule/index.vue'
    },
    {
      name: 'Report',
      path: '/Report/:id',
      component: 'pages/Report/index.vue'
    },
  ]
}

这样是不是跟我们自己配置的 router.js 有87%相像呢？

结语

若是在中小型专案的话，其实以 pages 结构来配置 router.js ，确实可以省下很多繁杂手续。
就不用 import 一堆页面，又要一个一个填入到 router.js 了，填错了、打错字都很困扰。

可若页面太多，层层堆叠，那使用 pages 结构可能会深不见底，包好包满，包到炸裂。
有优点也有缺点，没有最完美的工具，但我们可以选择最适合的。

今天压线，可喜可贺