关于vue-router得使用心得

好的，我们这里废话不多说，直接开始今天得vue-router得使用心得分享

这篇文章我们不讲router得基本知识，我们讲再项目中怎么方便得使用vue-router.

//首先这里先创建一个router.js文件，再router.js文件中引入vue以及vue-router
import Vue from 'vue'
import Router from 'vue-router'
//接下来有两种方法
import Login from '@/views/Login'
//然后再
{
      path: '/',
      name: 'Login',
      component: Login,
      hidden: true
    }
   // 这里不建议使用此种方法 会出现加载过慢
   推荐使用
  {
      path: '/',
      name: 'Login',
      component: () => import Login from '@/views/Login'
      hidden: true
    }
    //在这里我们还可以进行一些语义化得封装
    const login = () => import ( '@/views/Login')
    //使用
    {
      path: '/',
      name: 'Login',
      component:login',
      hidden: true
    }

接下来还有一些路由守卫得功能，大家可以看一下我得相关代码，根据具体需求写

const whiteList = ['/adMeetingRoomList', '/adShowAllMtRoom', '/screenWelcome', '/apkUpload'] // no redirect whitelist

router.beforeEach((to, from, next) => {

  // 在免登录白名单，直接进入
  if (whiteList.indexOf(to.path) !== -1) {
    next();
  } else {
    if (to.name == 'Login') {
      next();
      return;
    }
    var name = store.state.user.name;
    if (name == '未登录') {
      if (to.meta.requireAuth || to.name == null) {
        next({
          path: '/',
          query: {
            redirect: to.path
          }
        })
      } else {
        setButtonPower(router, store, to);
        next();
      }
    } else {
      initMenu(router, store);
      if (to.path == '/chat')
        store.commit("updateMsgList", []);

      if (to.name != from.name && window.autoSave && window.autoSave.pageName && from.name == window.autoSave.pageName && checkAutoSaveData()) {
        let p = to.path;
        window.autoSave.pageObj.$confirm('您的信息还没有保存，是否需要保存？', {
            type: "warning",
            center: true,
            closeOnClickModal: false,
            closeOnPressEscape: false,
            confirmButtonText: '需要保存',
            cancelButtonText: '不需要'
          })
          .then(_ => {
            return;
          })
          .catch(_ => {
            delAutoSaveData(p);
            store.commit("updateName", "");
          });
        return;
      }
      setButtonPower(router, store, to);
      next();
    }
  }

})