more es6

Author: yyx990803

build/karma.config.js

@@ -13,7 +13,7 @@ module.exports = function (config) {
           {
             test: /\.js$/,
             exclude: /test|node_modules|vue\/src/,
-            loader: 'babel'
+            loader: 'babel?optional[]=runtime'
           }
         ],
         postLoaders: [

example/advanced/app.vue

@@ -27,8 +27,8 @@
 </template>
 
 <script>
-module.exports = {
-  data: function () {
+export default {
+  data () {
     return {
       authenticating: false
     }

example/advanced/components/inbox/index.vue

@@ -13,7 +13,7 @@ module.exports = {
     // 1. return a boolean
     // 2. return a promise that resolves to a boolean
     // 3. explicitly call transition.next() or abort()
-    canActivate: function (transition) {
+    canActivate (transition) {
       console.log('inbox canActivate?')
       if (transition.from.path === '/about') {
         alert('cannot navigate from /about to /inbox')
@@ -25,23 +25,32 @@ module.exports = {
     },
 
     // same deal with beforeActicate
-    canDeactivate: function (transition) {
+    canDeactivate (transition) {
       return confirm('Are you sure you want to leave inbox?')
     },
 
-    activate: function (transition) {
+    // activate hook is called when the route is matched
+    // and the component has been created.
+    // this hook controls the timing of the component
+    // switching - the switching won't start until this
+    // hook is resolved.
+    activate () {
       console.log('activating inbox...')
-      transition.next()
+      return new Promise((resolve) => {
+        console.log('inbox activated.')
+        resolve()
+      })
     },
 
     // for doing cleanups
-    deactivate: function (transition) {
-      console.log('inbox deactivate')
-      transition.next()
+    // destructuring can make hooks cleaner
+    deactivate ({ next }) {
+      console.log('inbox deactivated.')
+      next()
     }
   },
 
-  data: function () {
+  data () {
     return {
       message: {}
     }

example/advanced/components/inbox/message.vue

@@ -18,18 +18,18 @@ module.exports = {
     // 1. return a promise
     // 2. explicitly call transition.next() or
     //     transition.abort(reason)
-    data: function (transition) {
+    data ({ to, next }) {
       // "this" is available
       var params = {
-        id: transition.to.params.messageId
+        id: to.params.messageId
       }
 
       // callback based
-      messagesSerivce.get(params, function (err, message) {
+      messagesSerivce.get(params, (err, message) => {
         if (err) {
           // handle error, e.g. display a warning
         } else {
-          transition.next({
+          next({
             message: message
           })
         }
@@ -43,7 +43,7 @@ module.exports = {
   },
 
   // default state
-  data: function () {
+  data () {
     return {
       message: {}
     }

example/advanced/index.js

@@ -1,21 +1,23 @@
 // warning: vue-router requires Vue 0.12.10+
-var Vue = require('vue')
-var VueRouter = require('../../src')
+import Vue from 'vue'
+import VueRouter from '../../src'
+import { configRouter } from './route-config'
+require('es6-promise').polyfill()
 
 // install router
 Vue.use(VueRouter)
 
 // create router
-var router = new VueRouter({
+const router = new VueRouter({
   history: true,
   saveScrollPosition: true
 })
 
 // configure router
-require('./route-config')(router)
+configRouter(router)
 
 // boostrap the app
-var App = Vue.extend(require('./app.vue'))
+const App = Vue.extend(require('./app.vue'))
 router.start(App, '#app')
 
 // just for debugging

example/advanced/route-config.js

@@ -1,4 +1,4 @@
-module.exports = function (router) {
+export function configRouter (router) {
 
   // normal routes
   router.map({
@@ -68,10 +68,10 @@ module.exports = function (router) {
   // 1. return a boolean
   // 2. return a Promise that resolves to a boolean
   // 3. call transition.next() or transition.abort()
-  router.beforeEach(function (transition) {
+  router.beforeEach((transition) => {
     if (transition.to.path === '/forbidden') {
       router.app.authenticating = true
-      setTimeout(function () {
+      setTimeout(() => {
         router.app.authenticating = false
         alert('this route is forbidden by a global before hook')
         transition.abort()

example/advanced/services/messages.js

@@ -1,7 +1,7 @@
 // just a mock
-module.exports = {
-  get: function (params, cb) {
-    setTimeout(function () {
+export default {
+  get (params, cb) {
+    setTimeout(() => {
       cb(null, {
         id: params.id,
         text: 'Hello this is a message'

example/advanced/webpack.config.js

@@ -13,13 +13,13 @@ module.exports = {
       {
         test: /\.vue$/,
         loader: vue.withLoaders({
-          script: 'babel'
+          js: 'babel?optional[]=runtime'
         })
       },
       {
         test: /\.js$/,
         exclude: /node_modules|vue\/src/,
-        loader: 'babel'
+        loader: 'babel?optional[]=runtime'
       }
     ]
   },

src/history/abstract.js

@@ -2,8 +2,8 @@ import { resolvePath } from '../util'
 
 export default class AbstractHistory {
 
-  constructor (options) {
-    this.onChange = options.onChange
+  constructor ({ onChange }) {
+    this.onChange = onChange
     this.currentPath = '/'
   }
 

src/history/hash.js

@@ -2,9 +2,9 @@ import { resolvePath } from '../util'
 
 export default class HashHistory {
 
-  constructor (options) {
-    this.hashbang = options.hashbang
-    this.onChange = options.onChange
+  constructor ({ hashbang, onChange }) {
+    this.hashbang = hashbang
+    this.onChange = onChange
   }
 
   start () {

src/history/html5.js

@@ -3,8 +3,7 @@ const hashRE = /#.*$/
 
 export default class HTML5History {
 
-  constructor (options) {
-    let root = options.root
+  constructor ({ root, onChange }) {
     if (root) {
       // make sure there's the starting slash
       if (root.charAt(0) !== '/') {
@@ -16,7 +15,7 @@ export default class HTML5History {
     } else {
       this.root = null
     }
-    this.onChange = options.onChange
+    this.onChange = onChange
     // check base tag
     let baseEl = document.querySelector('base')
     this.base = baseEl && baseEl.getAttribute('href')

test/unit/webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /test|node_modules|vue\/src/,
-        loader: 'babel'
+        loader: 'babel?optional[]=runtime'
       }
     ]
   }