kinanson的技術回憶

前言

這篇記錄一下在nuxt的路由和vue裡面的有些不同，雖然用的都是vue router，但是在vue裡面需要自己配置，但是在nuxt裡面則是採用約定優於配置的方式，隨著建立的方式而產生對應的路由，並且一些細節設定都有些許不同，那就讓我們看下去吧。

導覽

1. 約定優於配置的路由規則
2. 路由驗證
3. 換頁的動畫效果
4. 監聽每次切換路由的事件

約定優於配置的路由規則

先來節錄一下官網的例子，其實很簡單，照著建立對應的資料夾形式就會以下面的路由規則，而路由設定也只是供參考而已

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

 再看一下下面的例子，_則代表的是參數的意思

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

 

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

 路由驗證

每一個Page都會設定一個Validate的方法，來驗證每個頁面的規則，目前我有一個index.vue和一個about.vue，我想從index.vue按下連結後導到about.vue，

先看一下About.vue的原始碼

<template>
  <div>
    {{title}}
  </div>
</template>

<script>

export default {
  name: 'about',
  data () {
    return {
      title: '關於我的頁面'
    }
  }
}
</script>

此時導頁都會是正常的，但如果加上validate回傳false，導頁就會出錯並導到預設的404頁面

<template>
  <div>
    {{title}}
  </div>
</template>

<script>

export default {
  name: 'about',
  data () {
    return {
      title: '關於我的頁面'
    }
  },
  validate () { //新增了validate
    return false
  }
}
</script>

如果有傳參數的話，可以用物件的方式取得params

  validate ({ params }) {

  }

當然其實換個想法，我們應該可以在此做一些api驗證，然後自己導頁，或者是確定取得網址了，才回傳true以確保資料回來了才會進到頁面，雖然官網沒有提到怎麼運用，一切就端看聰明的工程師要怎麼實做了。

換頁的動畫效果

我們可以在assets加一支新的css

assets/style.css

.page-enter-active, .page-leave-active {
  transition: opacity .5s;
}
.page-enter, .page-leave-to {
  opacity: 0;
}

要引用scss或css有兩種方式，但就以官方範例的方式來進行，就是在nuxt.config.js裡面設定

  css: [
    'assets/style.css'
  ]

接著就可以測試，確實可以看到在換頁已有動畫效果了

另一種方式則是引入第三方的package來幫我們完成，之前筆者有寫過一篇請參考(https://dotblogs.com.tw/kinanson/2017/05/30/103700)，而在此篇我要用npm install的方式來進行

npm install --save vue2-animate

接著一樣在nuxt.config.js的css加上相關的css如下

css: [
    'assets/style.css',
    'vue2-animate/dist/vue2-animate.min.css'
  ]

接著在nuxt.config.js再加入transition的設定，在此我設定的是bounce，有多少動畫有興趣請至官網參考(https://github.com/asika32764/vue2-animate)

transition: 'bounce'

最後來看一下套用後的動畫效果

監聽每次切換路由的事件

我們常常都可能需要在每次換網址的時候，採取某些商業邏輯的行為，比如說驗證等等之類的，在nuxt則是需要定義在middleware的資料夾裡面，比如說筆者定義一支叫routeFilter.js的檔案，程式碼如下

//我們可以取得完整的context，裡面有非常多屬性，請讀者自行參閱
export default function (context) {
  console.log(context)
}

或者我們也可以用es6的Destructuring特性，從對象取得我們想要的屬性出來就好了

export default function ({ route }) {
    console.log(route)
}

最後需要在nuxt.config.js加上對應的屬性才會生效

router: {
    middleware: 'routeFilter'
  }