路由目录结构

src
└── router                   # router
      └── index.js

路由配置 - 路由懒加载

// router/index.js

 import App from '../App'

 const login = r => require.ensure([], () => r(require('../views/login/login')), 'login')
const join = r => require.ensure([], () => r(require('../views/join/join')), 'join')
const usercenter = r => require.ensure([], () => r(require('../views/usercenter/usercenter')), 'usercenter')
const notfound = r => require.ensure([], () => r(require('components/error/404')), 'notfound'); // 404 

 export default [{
  path: '/',
  component: App, //顶层路由，对应index.html
  children: [ //二级路由。对应App.vue
    //地址为空时跳转index页面
    { path: '/index', component: index, meta: { title: '首页' } },
    { path: '/login', component: login, meta: { title: '登录' } },
    { path: '/join', component: join, meta: { title: '注册' } },
    { path: '/usercenter', component: usercenter, meta: { title: '个人中心', requireAuth: true } }
  ]
}]

创建 router 实例 - 简单版

• 创建 router 实例，然后传 routes 配置

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

Vue.use(VueRouter)
const router = new VueRouter({
  routes   // （缩写）相当于 routes: routes
})

// 创建和挂载根实例
new Vue({
  router
}).$mount('#app')

路由权限及标题 - 进阶版

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

 Vue.use(VueRouter)
const router = new VueRouter({
  routes,
  mode: 'history'
})

 // 页面刷新时，重新赋值token
if(localStorage.getItem('userToken')) {
  store.commit(types.RECORD_USERTOKEN, localStorage.getItem('userToken'))
}

 // 路由发生之前
router.beforeEach((to, from, next) => {
  // 1. 显示标题：title
  document.title = to.meta.title ? to.meta.title : '东湖大数据交易中心'

  // 2. 权限验证: requireAuth
  let token = store.getters.userToken
  if(to.matched.some(r => r.meta.requireAuth)) {
    if(token) {
        checkLogin({ 'token': token }).then(res => {
          if(res.status != '0') {
            next({ path: '/login', query: { redirect: to.fullPath } })
          } else {
            next()
          }
        }).catch(error => {
          Vue.$vux.alert.show({ content: '错误：' + error.message + '，请稍后再试！' })
        })
    } else {
      next({ path: '/login', query: { redirect: to.fullPath } })
    }
  } else {
    next()
  }
})

 new Vue({
  router
}).$mount('#app')