vue项目中的路由配置

公司的项目使用vue脚手架来搭建，是属于后台管理系统。功能页比较多，就使用vue路由来进行跳转；

个人比较习惯上面这种方式放置路由文件，并且使用懒加载的模式来配置，如下：

import Vue from 'vue'
import Router from 'vue-router'
//import Login from '.././views/login.vue'
//import NotFound from '.././views/404.vue'
//import Home from '.././views/index.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',//去掉#号
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: resolve => require(['../views/login.vue'],resolve)
    },
    {
      path: '/404',
      name: 'NotFound',
      component: resolve => require(['../views/404.vue'],resolve)
    },
    {
      path: '/',
        redirect: '/default'
    },
    {
      path: '/',
      name: 'Home',
      component: resolve => require(['../views/index.vue'],resolve),
      meta: {title: '自述文件'},
      children:[
        {
          path: '/default',
          component: resolve => require(['../components/default.vue'],resolve),
          meta: {title: '系统首页'}
        },
        {
          path: '/set',
          component: resolve => require(['../components/set.vue'],resolve),
          meta: {title: '设置'}
        },
        {
          path: '/user',
          component: resolve => require(['../components/user.vue'],resolve),
          meta: {title: '账户管理'}
        },
        {
          path: '/member',
          component: resolve => require(['../components/memberList/memberList.vue'],resolve),
          meta: {title: '会员列表'}
        },
        {
          path: '/baseCharts',
            component: resolve => require(['../components/charts/baseCharts.vue'],resolve),
          meta: {title: '会员分析'}
        }
      ]
    }
  ]
})

在main.js中使用路由进行配置：

这样就可以在需要的地方使用路由了。