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

  以上代碼本人項目實測！！！真實可靠，請勿隨意轉載~轉載請注明出處~~~謝謝合作！