Vue常见问题汇总

1. 父子组件传值，子组件打印值为空问题

---

• 父组件数据由接口获取，传递存在延迟，子组件使用v-if判断props有值再进行渲染；
• 使用watch监听props值变化，进行渲染或进行值绑定；

2. 清除定时器

---

beforeDestroy() {
  if (this.timer) {
    clearInterval(this.timer);
    this.timer = null;
  }
},
beforeRouteLeave(to, from, next) {
  next();
  if (this.timer) {
    clearInterval(this.timer);
    this.timer = null;
  }
},

3. Vue package.json 依赖包版本

---

详细介绍

格式：
major.minor.patch
主版本号.次版本号.修补版本号
patch：修复bug，兼容老版本
minor：新增功能，兼容老版本
major：新的架构调整，不兼容老版本

4. vue-router路由懒加载

---

// 箭头不能加花括号，会失效
component: () => import(/* webpackChunkName: "xxx" */ "../views/xxx.vue")

5. 简单权限控制

---

// router.js
{
    path: '/governmentUserIndex',
    name: 'GovernmentUserIndex',
    meta: {
      requireAuth: true // 配置此条，进入页面前判断是否需要登陆
    },
    beforeEnter: (to, from, next) => {
      // let accessToken = sessionStorage.getItem("access_token");
      let userType = sessionStorage.getItem("userType");
      if (userType != "3") next({
        name: 'Home'
      })
      else next()
    },
    component: () => import('../views/ServePlatform/Government/index.vue')
 },
// main.js
router.beforeEach((to, from, next) => {
  if (to.matched.some(res => res.meta.requireAuth)) { // 判断该路由是否需要登录权限
    let accessToken = sessionStorage.getItem('access_token');
    //判断state防止CSRF攻击
    let state = tools.getQueryVariable("state");
    let localState = sessionStorage.getItem("state");
    if (accessToken && localState === state) { // 查询本地存储信息是否已经登陆
      next();
    } else {
      auth.login();
    }
  } else {
    next();
  }
});