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

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