vue 项目问题解决记录

一、解决 element ui 导航栏重复点菜单报错问题

// 解决 `element ui` 导航栏重复点菜单报错问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch((err) => err);
};

二、刷新当前路由(页面)

1. 暴力解决-强制整个页面进行刷新

// 强制刷新当前页面
this.$router.go(0)
// 或者
location.reload()

问题：浏览器进行重新加载，出现页面闪烁和空白，极大的降低了用户体验。

2. 使用 provide/inject 实现

// 路由出口组件 <router-view />
<template>
  <router-view v-if="isShow" />
  <!-- 如果需要组件状态缓存，v-if就需要加在keep-alive标签上 -->
<keep-alive v-if="isShow">
      <router-view></router-view>
</keep-alive>
</template>
<sciprt>
 export default () {
    name: 'Main',
    data () {
      return {
        // 控制router-view的隐藏与展示
        isShow: true
      }
    },
    // 提供可注入子组件属性
    provide () {
      return {
        reload: this.reload
      }
    },

    // 定义reload方法
    methods: {
      reload () {
        // 先隐藏
        this.isShow = false
        // $nextTick() 将回调延迟到下次 DOM 更新循环之后执行
        this.$nextTick(() => {
          this.isShow = true
        })
      }
    }
  }
</script> 

// 需要刷新页面的组件
<template>
  <div class="nav-bar">
    // 如果是router-link标签中一定要添加.native修饰符，默认router-link阻止了a链接的默认事件
    <router-link :to="{name: 'Index'}" @click.native="reload">首页</router-link>
    // 正常点击调用即可
    <el-button @click="reload">刷新</el-button>
  </div>
</template>
<script>
export default {
  name: 'Link',
  // 接收注入的数据
  inject: [
    'reload'
  ],
}
</script>

四、scss不能识别 /deep/

/deep/ .container {
  height: 550px;
}
// 将/deep/换成::v-deep 如下
::v-deep .container {
   height: 550px;
}

五、vite-plugin-vue-setup-extend插件影响debugger不显示页面源码问题；

// 直接改包中的代码: vite-plugin-vue-setup-extend/dist/index.cjs
return {
// map: str().generateMap(),
map: str().generateDecodedMap()
code: str().toString()
};
// 这个问题是使用magic-string生成sourceMap导致的;生成sourceMap有两种方式，一种是generateMap，编码字符串插入源码式，一种是不编码generateDecodedMap。