Vue路由配置整理(齐全，从官网整理为大白话)

直接上代码了 有详细注释 每一行都有 仔细读一下就懂了

// 路由文档

// 1、导入路由 导入Vue进行挂载
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);

// 2、导入组件进行路由懒加载 (否则可能会出现首页白屏问题并且也会造成很大性能问题)|| 量大的话写个js文件写好路由 然后类似模块一样进行导入进来

// 3、写路由规则配置项
const router = new Router({
  mode: 'history', // 路由模式 取值histort & hash   区别一个无#号一个有#号 一个兼容性好一个兼容性不好  上线后也会存在#号需要后端配合
  base: '/', // 打包路径，默认为/，可以修改
  routes: [
    // 登录页 正常来说无二级路由 无参数 所以配置项少
    {
      path: '/login', // 路径
      name: 'login', // 名称
      component: () => import('@/layout/login'), // 加载组件(懒加载)
      // 或者异步组件 异步加载 component:(resolve)=>require(['组件路径'],resolve),
    },
    // 首页 首页一般就有导航 有布局了 布局通常将 main内容放入二级路由中 这里也写个示例
    {
      path: '/home',
      name: 'Home',
      hidden: true, // 常常见到自定义的属性 我理解为是标识操作 判断是否加载一些组件或做导航栏权限 不过this.$route时查看不到 只能点语法点出来
      component: () => import('@/layout/index'),
      children: [
        // app页面一级页面出口
        // layout/index 页面就是二级路由出口   layout要写好router-view 并且布局好
        {
          path: '/era',
          name: 'era',
          props: { default: true, sidebar: false }, // 路由传参 不过这种方式 不习惯使用
          meta: { title: '标题', id: '001', show: false }, // 路由元信息 可以通过meta写标识 保存变量等操作 可以从路由表中拿到 也可以做在路由守卫中做处理等
          component: () => import('@/views/era/index'),
        },
      ],
    },

    // 默认重定向
    {
      path: '/',
      redirect: '/home',
    },
    // 默认404、一定要放在最下面 因为先走上面的代码 如上代码没有匹配到 则渲染 * 号 进入404
    {
      path: '*',
      name: 'error',
      component: () => import('@layout/404'),
    },
  ],
});

// 4、导出
export default router;

// 全局守卫
router.beforeEach((to, from, next) => {}); // 前置导航 核心回调函数 to from next
router.afterEach((to, from) => {}); // 后置导航 没有 next

// 组件守卫
const vm = new Vue();
vm.beforeRouteEnter((to, from, next) => {}); // 进入路由之前
vm.beforeRouteUpdata((to, from, next) => {}); // 路由更新时
vm.beforeRouteLeave((to, from, next) => {}); // 离开路由之前

// 扩展
/**
 * 1、数据获取
 * 导航完成之后获取：created() 组件钩子函数
 * 导航完成之前获取：beforeRouteEnter() 组件守卫中获取数据 当数据获取成功后调用 next 放行
 *
 * 2、路由过渡
 * <transition :name="route.meta.transition || 'fade'">
 *  <component :is="Component" />
 * </transition>
 *
 * 3、滚动行为 scrollBehavior (to, from, savedPosition){ // return 期望滚动到哪个的位置 }
 * 使用前端路由 当切换到新路由时 想要页面滚到顶部 或者是保持原先的滚动位置
 * 就像重新加载页面那样 vue-router能做到而且更好 它让你可以自定义路由切换时页面如何滚动
 * savedPosition回调 => 只有当这是一个 popstate 导航时才可用（由浏览器的后退/前进按钮触发）
 * 如果返回一个 falsy 的值，或者是一个空对象，那么不会发生滚动。
 *
 * 示例一：简单处理
 * scrollBehavior(to, from, savedPosition) {
 *   // 始终滚动到顶部   其他示例 支持的功能都在官网
 *   return { top: 0 }
 *   // 或者你可以返回一个 CSS选择器或一个DOM元素在这种情况下 top 和 left 将被视为该元素的相对偏移量
 *   return {
 *   // el: document.getElementById('main'),
 *      el: '#mainB',
 *      top: -10
 *   }
 * },
 * 示例二：延迟滚动 => 滚动前等待 500ms
 * scrollBehavior(to, from, savedPosition) {
 *  return new Promise((resolve,reject) = > {
 *        setTimeout(() = > {
 *          resolve({ left: 0, top: 0 })
 *       },500)
 *    })
 * },
 *
 *
 * 4、使用webpack 把组件按组分块
 *
 *
 * 5、检测重定向
 * await router.push('/my-profile')
 *  if (router.currentRoute.value.redirectedFrom) {
 *    // redirectedFrom 是解析出的路由地址，就像导航守卫中的 to和 from
 *  }
 *
 * 6、动态路由
 * router.addRoute() 添加路由
 * router.removeRoute() 删除路由
 */