const routes = [
  {
    name: 'Home',
    path: '/',
    meta: {
      title: 'home' // 主页的title为home
    },
    component: require('./components/Home.vue')
  },
  {
    name: 'Article',
    path: '/article',
    meta: {
      title: 'article' // 文章模块相应的title为article
    },
    component: require('./components/Article.vue'),
    children: [
      {
        name: 'vue2_1',
        path: '/article/vue2_1',
        meta: {
          title: 'vue2.0一起在懵逼的海洋里越陷越深（一）' // 子路由也是一样的道理
        },
        component: require('./md/articles/vue2-1.md')
      },
      // ... 子路由和父路由都差不多，所以后面的就省略了
    ]
  },
  {
    name: 'Demo',
    path: '/demo',
    meta: {
      title: 'demo' // 演示模块title为demo
    },
    component: require('./components/Demo.vue'),
    children: [
      {
        name: 'DemoVuexState',
        path: 'vuex_state',
        meta: {
          title: 'vuex演示'
        },
        component: require('./components/DemoVuexState.vue')
      }
    ]
  }
]

export default routes

next() // 默认通过路由
next(false) // 中止导航，那么将会跳回到from的地址
next({ path: '/' }) // 跟一个路由参数对象，将会中止当前导航并跳往指向的路由

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  console.log('小弟B：哎呀妈呀！大兄弟，这是要去哪呀？', to)
  console.log('小弟A：大兄弟，哪儿旮沓的呀！', from)
  next(false) // 大哥：谁让你过去的？
  // 调用next(false)中止导航，于是页面回到跳转前
})

router.afterEach((to, from, next) => {
  console.log('小弟B：哎呀妈呀！大兄弟，这是要去哪呀？', to)
  console.log('小弟A：大兄弟，哪儿旮沓的呀！', from)
  next() // 大哥：过去吧！
  // 调用next通过路由
})
``

**单个路由独享的钩子**，同样是两个方法`beforeEnter`和`afterEnter`，同样的套路。
套路如下：
```js
const router = new VueRouter({
  routes: [
    {
      path: '/demo',
      component: Demo,
      beforeEnter: (to, from, next) => {
        console.log('小弟B：哎呀妈呀！大兄弟，这是要去哪呀？', to)
        console.log('小弟A：大兄弟，哪儿旮沓的呀！', from)
        next() // 大哥：过去吧！
        // 调用next通过路由
      },
      afterEnter: (to, from, next) => {
        console.log('小弟B：哎呀妈呀！大兄弟，这是要去哪呀？', to)
        console.log('小弟A：大兄弟，哪儿旮沓的呀！', from)
        next({ path: '/' }) // 大哥：像那边走！
        // 调用next({ path: '/' })中止导航，并跳到首页
      }
    }
  ]
})

const Demo = {
  template: `<div>this is a Demo </div>`,
  beforeRouteEnter (to, from, next) {
    console.log('小弟B：哎呀妈呀！大兄弟，这是要去哪呀？', to)
    console.log('小弟A：大兄弟，哪儿旮沓的呀！', from)
    next() // 大哥：过去吧！
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
  },
  beforeRouteLeave (to, from, next) {
    console.log('小弟B：哎呀妈呀！大兄弟，这是要去哪呀？', to)
    console.log('小弟A：大兄弟，哪儿旮沓的呀！', from)
    next() // 大哥：过去吧！
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

const title = 'leenty blog'
// 定义我们站点的名字

Vue.use(VueRouter)

/* eslint-disable no-new */
const router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'u-link--Active',
  routes
})

// 路由导航钩子，beforeEach，在路由进入前调用
router.beforeEach((to, from, next) => {
  let titleStr = ''
  // 检测是不是要跳转首页，如果是，则不处理
  if (to.name !== 'Home') {
    // 倒序遍历数组获取匹配到的路由节点，拼接各部分title
    for (let i = to.matched.length - 1; i >= 0; i--) {
      titleStr += `${to.matched[i].meta.title} - `
    }
  }
  // 添加站点名
  titleStr += title
  // 更新title
  document.title = titleStr
  // 继续路由导航
  next()
})

export default router

const routes = [
  {
    name: 'Article',
    path: '/article',
    component: require('./components/Article.vue')
    // 这里因为书写以及以后做异步组件的方便，将原先的import导入的方式改成了require的方式
    // 这么做不会实质上没和之前没有变化的，只是单纯的写法不同。
  }
]

export default routes

const routes = [
  {
    name: 'Article',
    path: '/article',
    // 父路由上尽量写绝对路径，不然可能会引起一些麻烦，
    // 有捣(xia)鼓(gao)精神的同学可以试试
    component: require('./components/Article.vue'),
    children: [
    // children节点：传入一个子路由数组，格式与父路由是一样的
      {
        name: 'vue2_1',
        path: 'vue2_1',
        // path: 导入的路径是相对路径，你不需要写全，如下的path将会被vuejs理解为：
        // '/article/vue2_1'
        // *** 注意： ***
          // 如果你写的是这样的相对路径，就千万别在前面加'/'，不然就意味着这是一个绝对路径
        component: require('./md/articles/vue2-1.vue')
      },
      {
        name: 'vue2_2',
        path: '/article/vue2_2',
        // 演示一个绝对路径，这样子的路径会被vuejs理解为其本意'/article/vue2_2'
        // 如果这里只写了'/vue2_2'的话，vuejs就会把路由理解为'/vue2_2'，
        // 不过不用担心他显示上的问题，只是url会有些有趣的区别
        // 你会发现虽然url变短了，但是父模板依然正常的显示着。
        component: require('./md/articles/vue2-2.vue')
      },
      {
        name: 'vue2_3',
        path: 'vue2_3',
        component: require('./md/articles/vue2-3.vue')
      },
      {
        name: 'vue2_4',
        path: 'vue2_4',
        component: require('./md/articles/vue2-4.vue')
      },
      {
        name: 'vue2_5',
        path: 'vue2_5',
        component: require('./md/articles/vue2-5.vue')
      }
    ]
  }
]

export default routes

import * as types from '../types'
// 引入命名空间，放置在types里

import getScrollData from '../../utils/scroll'
// 这是获得滚动数据的js文件，具体怎样写的可以去我github开源项目里看
// 导出的是一个方法，这个方法返回一个对象
// {
//    scrollTop: 0,
//    scrollHeight: 0,
//    windowHeight: 0,
//    scrollBottom: 0
// }

const state = {
  articleList: false,
  // 布尔值，表示侧拉文章列表的开关
  scroll: {
  // 滚动相关的数据
    scrollTop: 0,
    scrollHeight: 0,
    windowHeight: 0,
    scrollBottom: 0
  }
}

const getters = {
  // articleList: ({status}) => status.articleList
  // tips: 上面这种方法是错误的。这里的getters传入进来的不是state的根对象，
  // 而是当前的state对象，在这里也就相当于是state = state.status
  // 所以可以放心的用state
  articleList: state => state.articleList
  // 设置Getters，在.vue文件里可以使用mapGetters方法获得
}

const mutations = {
  [types.ARTICLE_LIST] (state) {
    state.articleList = !state.articleList
  },
  // 设置mutations，只有这个方法可以改变state
  [types.SCROLLDATA] (state, scrollObj) {
    state.scroll = scrollObj
  }
}

const actions = {
  articleListSwitch ({ commit }) {
    commit(types.ARTICLE_LIST)
  },
  // 设置actions,可以在这里做一些异步的工作，然后使用commit来调用mutations修改state
  pushScrollData ({ commit }) {
    commit(types.SCROLLDATA, getScrollData(), { silent: true })
    // 因为页面滚动触发频繁，会影响到我们平时的vuex的审查，所以这里选择静默提交
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}
// 而后的.vue文件就可以调用辅助方法达到获取状态或者控制状态的目的了

import Vue from 'vue'
// 导入vue
import Vuex from 'vuex'
// 导入vuex

import status from './modules/status'
// 导入status模块（这是我管理全局应用状态的模块）
import demo from './modules/demo'
// 导入demo模块（这个的部分演示可以在http://vue2.leenty.com/demo/vuex_state/里看到）

Vue.use(Vuex)
// 告诉vue将要使用vuex

const debug = process.env.NODE_ENV !== 'production'
// env里去获取当前的环境是否需要开启严格模式
// 在发布环境开启严格模式会造成性能上不必要的损失

export default new Vuex.Store({
// 默认导出vuex模块
  modules: {
  // 导入模块
    status,
    demo
  },
  strict: debug
  // 是否开启严格模式
})

import * as types from '../types'
// 导入mutations的命名空间

const state = {
// 定义state
  demoFollow: false,
  // 这里模拟的是关注的状态，布尔值表示是否关注
  demoFollowPending: false
  // 是否在请求中(actions是否在执行异步操作)
}

const getters = {
// 定义getters, getters是对state的扩展，可以以state衍生出其他状态
  demoFollowStatus: state => state.demoFollow ? '已关注' : '未关注'
  // demoFollowStatus是demoFollow的衍生量，将原来的布尔值映射为'已关注' : '未关注'
}

const mutations = {
// 只有mutations才能操作改变state，mutations是同步执行的
// 所以有关异步的操作请放在actions里执行
  [types.DEMO__VUEX_FOLLOW] (state, status = NaN) {
  // 使用预定义好的名字来写mutations方法
    state.demoFollow = isNaN(status) ? !state.demoFollow : status
  },
  [types.DEMO__VUEX_FOLLOW_PENDING] (state, status = NaN) {
  // 这里对status传值做了审查，如没有传，则对要改变的布尔值进行取反操作
    state.demoFollowPending = isNaN(status) ? !state.demoFollowPending : status
  }
}

const actions = {
// actions是可以执行异步操作的，操作完毕后触发mutations里的方法去改变state的状态
  demoFollowAjax ({commit}, status) {
    commit(types.DEMO__VUEX_FOLLOW_PENDING)
    // 在异步操作前通过mutations告诉应用，现在正在进行异步操作
    setTimeout(() => {
      // 利用延时函数模拟异步的ajax操作
      commit(types.DEMO__VUEX_FOLLOW_PENDING)
      // commit 是在actions里用来触发mutations的方法
      // 告诉应用，异步操作结束
      commit(types.DEMO__VUEX_FOLLOW, status)
      // 为关注按钮赋予新的状态
    }, 2000)
  }
}

export default {
// 导出整个demo模块
  state,
  getters,
  actions,
  mutations
}

const mutations = {
  [types.DEMO__VUEX_FOLLOW] (state, status = NaN) {
    state.demoFollow = isNaN(status) ? !state.demoFollow : status
  }
}

export const DEMO__VUEX_FOLLOW = 'DEMO__VUEX_FOLLOW'
export const DEMO__VUEX_FOLLOW_PENDING = 'DEMO__VUEX_FOLLOW_PENDING'
// 其实就是字符串集合，最后用 import * as types from '../types' 方法导入vuex模块里
// 就变成了一个types对象

const mutations = {
  [types.DEMO__VUEX_FOLLOW]: (state, status = NaN) => {
  // [types.DEMO__VUEX_FOLLOW]是提取types.DEMO__VUEX_FOLLOW的值的一种方式
  // 在这里[types.DEMO__VUEX_FOLLOW]提取出来就是types.js里预定义的'DEMO__VUEX_FOLLOW'
    if (isNaN(status){
      state.demoFollow = !state.demoFollow
    } else {
      state.demoFollow = status
    }
  }
}

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

mapGetters(['demoFollowStatus'])
// 此方法导出的是一个Getters对象
mapGetters({
  demoFollow: 'demoFollowStatus'
})
// 可以通过传入对象的形式来改变得到的getters方法名

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  data () {
    return {
    }
  },
  computed: {
  // vue的计算属性，计算属性内方法的私有变量变动会触发这个属性的重新计算
    ...mapState({
      mapStateFollow: ({demo}) => demo.demoFollow,
      mapStateFollowPending: ({demo}) => demo.demoFollowPending
    }),
    // mapState()直接读取State里的状态内容
    ...mapGetters(['demoFollowStatus'])
    // mapGetters()通过getters转化state从而得到你想要的内容
  },
  methods: {
  // vue的方法，可以是一个事件的方法，也可以是一个vuex的方法，也可以是一个普通函数
    ...mapMutations(['DEMO__VUEX_FOLLOW']),
    // 同步的改变状态
    ...mapActions(['demoFollowAjax'])
    // 异步的改变状态
  }
}

// 主要结构
{
  name: 'Article'
}
  // 或者
{
  path: '/article'
}
// 二者选其中之一，如果两种都使用，那么vue会选择使用name字段
// eg
{
  name: 'Article',
  path: '/demo'
}
// 实际效果等同于:
{
  name: 'Article'
}

{
  name: 'Article', // 与path字段二选一
  path: '/article', // 与name字段二选一
  params: { // 可选字段 隐性的传递参数(多用来页面传参)
    userId: 123 // 传递的参数demo
  },
  query: { // 可选字段 查询参数，就是url里‘?’之后的部分
    plan: 'private' // 查询参数demo
  }
}

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
  routes
})

import Vue from 'vue'
import router from './router'

import App from './App'

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

new Vue({
  router: router,
  render: h => h(App)
}).$mount('app')
// 被简写成了
new Vue({
  router, // 这是ES6对象的简写，扩展开就是router: router
  // 箭头函数(=>)是ES6的新语法
  render: h => h(App) // 这里扩展开就是render: (h) => { return h(App) }
}).$mount('app')

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

// 告诉vue要使用router
Vue.use(VueRouter)

/* eslint-disable no-new */
// 实例化router对象
const router = new VueRouter({
  mode: 'hash', // 设置路由模式 可选值: "hash" | "history" | "abstract"，默认"hash"
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
  // base: '/app/', // 这个是设置根目录路径，一般用不到，默认'/'
  routes // 挂载路由集合 后面会说
})
// 导出router对象
export default router

// 导入之前写好的两个模板
import Home from './components/Home.vue'
import Article from './components/Article.vue'

// 编写路由集合
const routes = [
  {
    name: 'Home', // 路由名，这个字段是可选的
    path: '/', // 路由路径，这里是根路径所以是'/'
    component: Home // 模板
  }, // 这些是常用的
  {
    name: 'Article',
    path: '/article',
    component: Article
  }
]
// 导出路由集合
export default routes