vue项目实战：路由文件的配置

/*
 * @Description: 路由入口配置文件 index.js文件
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-06-10 15:53:32
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-20 17:05:28
 */
import Vue from 'vue'
import Router from 'vue-router'
import vuecodeRouterModule from './vuecodeRouter'
import elementRouterModule from './elementStudyRouter'
// import HelloWorld from '@/components/HelloWorld' // 基础写法，没有懒加载，打包分离代码

// 导入进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 简单配置 详细看  https://github.com/rstacruz/nprogress
NProgress.inc(0.1)
NProgress.configure({ easing: 'ease', speed: 600, showSpinner: false })

Vue.use(Router)

// 1、vue异步组件 --> 第一种: 异步组件将每一个组件生成一个js文件
// 2、es6中import懒加载 ---> 第二种: 会将webpackChunkName名字相同的生成一个js文件    
// 3、webpack提供的require.ensure() r就是resolve的意思 ---> 第三种:和第二种方法类似但是可以单独引入依赖会将名字相同的生成一个js文件    

// 解决菜单多次点击报错的问题 fix vue-router NavigationDuplicated
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return VueRouterPush.call(this, location).catch(err => err)
}
const VueRouterReplace = Router.prototype.replace
Router.prototype.replace = function replace (location) {
  return VueRouterReplace.call(this, location).catch(err => err)
}

const router = new Router({
  routes: [{
      path: '/',
      redirect: '/dashboard'
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/page/login/login')
    },
    {
      path: '/',
      name: 'home',
      component: () => import('@/components/layout/home'),
      children: [{
          path: '/dashboard',
          name: 'dashboard',
          component: () => import('@/page/dashboard/index.vue'), // 第一种方式：ES6的import()方法---按需加载(常用)
          // component: resolve => require(['@/page/dashboard/index.vue'], resolve), // 第二种方式：vue的异步组件，require()方法。（按需加载）
          // component: r => require.ensure([], () => r(require('@/page/dashboard/index.vue')), 'dashboard'), // 第三种方式：webpack提供的require.ensure()  r就是resolve的意思
          // component: () => import(/* webpackChunkName: "dashboard" */ '@/page/dashboard/index.vue'), // 最优官方，懒加载和打包分离代码。(项目推荐使用)一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)
          meta: {
            title: '首页'
          }
        },
        {
          path: '/baiduMapTest',
          name: 'baiduMapTest',
          component: () => import('@/page/baiduMap/baiduMapTest.vue'), 
          meta: {
            title: '百度地图'
          }
        },
        {
          path: '/vueBaiduMap',
          name: 'vueBaiduMap',
          component: () => import('@/page/baiduMap/vueBaiduMap.vue'),
          meta: {
            title: 'vue百度地图'
          }
        },
        ...vuecodeRouterModule,
        ...elementRouterModule,
        {
          path: '*',
          name: '404',
          component: () => import('@/page/404/notFound')
        }
      ]
    }
  ]
})

import store from '../store'

const whiteList = ['/login'] // no redirect whitelist 白名单不需要登录
// 路由全局前置钩子
router.beforeEach((to, from, next) => {
  // console.log(to,'to')
  // 开启进度条
  NProgress.start();
  // url 注入  直接url进来
  // if(to.name != 'login' && to.name != 'dashboard'){
  //   localStorage.setItem('path', JSON.stringify(to.name))
  //   localStorage.setItem('query', JSON.stringify(to.query))
  // }
  /*登录界面登录成功之后，会把用户信息保存在会话
  存在时间为会话生命周期，页面关闭即失效。
  这里还可以做全局的loading 效果 在 router.afterEach 关闭 */
  
  // 网页标题
  if(to.meta.title){
    document.title = `${to.meta.title} | vue-manage`;
  }
  
  const token = store.state.user.token;
  // console.log(token,'token')

  if(token){
    if(to.path === '/login'){
      next({
        path: to.query.redirect || '/',
        query: {}
      })
    } else {
      next()
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      // 点击退出时,会定位到这里
      next()
    } else {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
      NProgress.done()
    }
  }
})

// 路由全局后置钩子
router.afterEach((to, from) => {
  // 进度条加载完毕
  NProgress.done()
})

export default router

// 备注 vue2.2.0 以后新增了router.addRoutes 添加动态路由 比如 登录进去才可以看得到的路由 一些权限路由
// router.addRoutes(routes: Array<RouteConfig>)
// 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组
// 使用：
// this.$router.options.routes = routes; // 是因为，router.options.routes 不是响应式的
// this.$router.addRoutes(routes);

// 如果路由报错 Uncaught (in promise) Error: Redirected from "/dymicFrom" to "/login" via a navigation guard. 退出登录时候 location.reload();


/*路由的 meta 属性里面添加 keepAlive 值为 true or false  keep-alive标签上使用 include、exclude max属性控制需要缓存的组件（对应组件写上name:'xxx'）
  <keep-alive>
    <router-view v-if='$route.meta.keepAlive'></router-view>
  </keep-alive>
  <router-view v-if='!$route.meta.keepAlive'></router-view>
*/

/*
 * @Description: element-ui用法 知识点路由
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-07-20 10:54:04
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-07 10:16:33
 */ 

const elementRouterModule = [
  {
    path: '/dymicFrom',
    name: 'dymicFrom',
    component: () => import('@/page/usualElementStudy/dymicFrom'),
    meta: {
      title: 'element-ui动态组件'
    }
  },
  {
    path: '/elementTable',
    name: 'elementTable',
    component: () => import('@/page/usualElementStudy/elementTable'),
    meta: {
      title: 'element-ui表格的常规用法'
    }
  },
  {
    path: '/tableDetail',
    name: 'tableDetail',
    component: () => import('@/page/usualElementStudy/tableDetail'),
    meta: {
      title: '详情界面'
    }
  }
]
export default elementRouterModule

/*
 * @Description: vue语法糖知识点路由
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-07-06 13:42:28
 * @LastEditors: lhl
 * @LastEditTime: 2020-08-13 18:01:00
 */ 
const vuecodeRouterModule = [
  {
    path: '/parent',
    name: 'parent',
    component: () => import('@/page/vueStudy/parent'),
    meta: {
      title: 'vue组件通信'
    }
  },
  {
    path: '/funCom',
    name: 'funCom',
    component: () => import('@/page/vueStudy/funCom'),
    meta: {
      title: 'vue函数式组件'
    }
  },
  {
    path: '/vueRouterParmas',
    name: 'vueRouterParmas',
    component: () => import('@/page/vueStudy/vueRouterParmas'),
    meta: {
      title: 'vue路由传参'
    }
  },
  {
    path: '/vueRouterDefend',
    name: 'vueRouterDefend',
    component: () => import('@/page/vueStudy/vueRouterDefend'),
    meta: {
      title: 'vue守卫'
    }
  },
  {
    path: '/vueGrammar',
    name: 'vueGrammar',
    component: () => import('@/page/vueStudy/vueGrammar'),
    meta: {
      title: 'vue语法糖总结'
    }
  },
]
export default vuecodeRouterModule

  以上代码本人项目实测！！！真实可靠，请勿随意转载~转载请注明出处~~~谢谢合作！