Vue项目中遇到的常见的问题总结（二）

vivi_潇潇
357 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

首屏加载速度慢

关于如何计算首屏加载时间，可以打开控制台，然后刷新网站，如下图，右下角的load时间，即为首屏加载时间。如果这个时间过长，则会影响用户体验，因此我们要想办法减少这个首屏加载时间，以下是本人总结的几个注意点。

image.png

  1. 路由懒加载

    路由懒加载最常见是通过import()来实现。
    webpack会将每个路由组件分块打包到一个单独的js中去，只有加载该路由的时候，才会去加载这对应的路由组件，从而实现按需加载。
    利用webpackChunkName，使编译打包后的js文件名字能和路由组件一一对应

     {
     path: '/user',
     name:'user',
     component: () =>                     
        import(
         /*webpackChunkName:"user"*/'@/components/page/user.vue'
         )
 }

  2. 按需加载
    在实战开发中，肯定会需要引入如element UI ，语言包等等的组件库，那么我们应尽可能按需加载。访问到某个页面，只引入该组件库需要用到的组件即可，而不是一次性全部引入。

    import Vue from 'vue';
import { Button, Select } from 'element-ui';

Vue.use(Button)
Vue.use(Select)

  3. 合理使用防抖节流
    防抖是指事件触发n秒后再执行回调，如果在n秒内再次触发，则会重新计算。
    常用场景：搜索框查询，表单验证，浏览器缩放等。
    节流是指如果持续触发事件，则每隔n秒执行一次。
    常用场景：射击类游戏，计算鼠标移动距离，监听scroll事件。

    /**
 * 节流
 * fn是我们需要包装的事件回调, interval是时间间隔的阈值
 */
const throttle: any = function(fn: any, interval = 1000): any {
  // last为上一次触发回调的时间
  let last: any = 0;
  // 将throttle处理结果当作函数返回
  return function(this: void) {
    // 保留调用时的this上下文
    const context = this;
    // 保留调用时传入的参数
    const args = arguments;
    // 记录本次触发回调的时间
    const now = +new Date();
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
      last = now;
      fn.apply(context, args);
    }
  };
};
/**
 * 防抖
 * fn是我们需要包装的事件回调, delay是每次推迟执行的等待时间
 */
const debounce = function(fn: any, delay: any = 700) {
  // 定时器
  let timer: any = null;
  // 将debounce处理结果当作函数返回
  return function(this: void) {
    // 保留调用时的this上下文
    const context = this;
    // 保留调用时传入的参数
    const args = arguments;
    // 每次事件被触发时，都去清除之前的旧定时器
    if (timer) {
      clearTimeout(timer);
    }
    // 设立新定时器
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  };
};

限制无权限路径访问

从后台获取允许访问的菜单列表，并在右侧菜单栏展示，但路由已在router.js中配置完成，此时无权限的路径不展示在前端页面，但用户仍可输入url进行访问。则需要解决该问题。
解决办法：
1.从后台获取的允许访问的菜单列表储存在vuex或localStorage中
2.在router.js中对需要进行需要校验权限的页面配置*meta: { requiresAuth: true }*属性
3.接下来在全局路由守卫里做判断，可在main.js中编写钩子函数对路由进行判断，与后台允许访问列表的菜单匹配的路径才可进入。
如下代码
从后台获取的菜单列表储存在vuex或localStorage中。

menuList ={‘/index’，‘/Statistical’};
localStorage.setItem("menuList",JSON.stringify(menuList));

router.js中：

{
        path: '/Statistical',
        component: () => import('../components/page/Statistical.vue'),
        meta: { title: '统计',requiresAuth: true }
}

main.js中：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('token');
    if (!role && to.path !== '/login') {     //判断是否有权限进入该后台系统
        next('/login');              
    }
    //重点在这里
    else if (to.matched.some(res => res.meta.requiresAuth)){
        // 根据路由中添加的meta.requiresAuth属性
        // 判断用户访问的to.path，与后台菜单中的path是否一致
        let menuList = JSON.parse(localStorage.getItem('menuList'));
            if (menuList && menuList.length != 0) {
                if(menuList.indexOf(to.path) > -1){// 若存在，继续访问
                    next();
                } else {
                    next('/login');   //如不存在，则跳转至登录页面
                }
            } else {
                next();
            }
        }
    else {
            next();
        }
    }
});
avatar
文章
阅读
粉丝