总结我之前在项目中遇到的问题，解决这些问题的小办法

一、解决重进入同一个路由报错

 

vue-router.esm.js?fe87:2065 
        
       Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/service/varengine/varcalculator".
    at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2065:15)
    at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2035:15)
    at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2333:18)
    at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2260:8)
    at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2606:10)
    at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3034:22)
    at new Promise (<anonymous>)
    at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3033:12)
    at VueComponent.handleRoute (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/MenuTree/index.vue:39:20)
    at click (webpack-internal:///./node_modules/vue-loader/lib/template-compiler/index.js?

解决方案很简单：在route文件夹下的index.js下加入这段

const originalPush = VueRouter.prototype.push
  VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

 

二、解决element ui 回到顶部组件无法使用问题

Error: target is not existed: .page-component__scroll .el-scrollbar__wrap
    at VueComponent.init (element-ui.common.js?5c96:39269:1)
    at VueComponent.mounted (element-ui.common.js?5c96:39256:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:2987:1)
    at callHook$1 (vue.runtime.esm.js?2b0e:4000:1)
    at Object.insert (vue.runtime.esm.js?2b0e:4391:1)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6897:1)
    at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:7108:1)
    at Vue._update (vue.runtime.esm.js?2b0e:3734:1)
    at Vue.updateComponent (vue.runtime.esm.js?2b0e:3844:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:3415:1)

  

 解决方案很简单：在当前页面把之前写的el-backtop这个组件都删了加入

 

<template>
<div>
  <el-backtop></el-backtop>
</div>

</template>

三、我们在改一些组件的样式防止代码在上生产时会有一些限制条件，标准化代码如果用新样式覆盖旧样式那么就会被标准化代码这个条件给卡住，无法上到生产 

 

 

 :header-cell-style="tableHeaderColor"
 
 
methods：{
  tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F1;color:black;font-size:18px;font-weight: 900;'
      }
      },
}

//这个方法也可以比较稳的

 四、能够实现时间戳的转化格式为2022-8-25 15:33:52的方法

 

它是方法this.timestampToTime(参数) 

timestampToTime(timestamp) {
      timestamp = timestamp ? timestamp : null;
      let date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }
//实现时间戳的转化格式为2022-8-25 15:33:52

五、实现实时页面展示当前时间

 

 

 

 

最核心就是这两句 

setInterval(()=>{this.newdate=this.timestampToTime(new Date())},1000);
clearInterval();
//用以上操作可以一秒执行一次，第二行代码清除定时器防止内存泄露

cursor:pointer;
//鼠标箭头变小手。

六、不太聪明的实现表格导出

 

 

 

 

 

 

downfrequency(){
      let obj={
        //这里面的是要通过下载传过去的参数
        pageSize:this.tableConfig.pageOptions.pageIndex,
        pageCount:this.tableConfig.pageOptions.pageSize,
        isPage:1,
        startDate:this.intervalForm.date1,
        endDate:this.intervalForm.date2,
        shopId:this.shopAll[0].code,
        cusName:this.inputdata
      }
      API.frequency(obj).then((res)=>{
          // console.log(res,"...下载frequency");
          if(res.code == "success" && res.data){
//下面的obj是对要传过去的参数拼接形式传过去
            let obj = 
`type=TRADE&shopId=${this.shopAll[0].code}&startDate=${this.intervalForm.date1}&endDate=${this.intervalForm.date2}&cusName=${this.inputdata}`;
            let downloadUrl = location.origin + "/" + API.detailsDownload(obj);
            // console.log(downloadUrl);
            let link = document.createElement("a");
            link.href = downloadUrl;
            link.click();
          }else{
            this.$message.error("没有数据可以导出")
          }
        })
      
    },

 这样就可以解决下载的问题，这个采用的是后端会给你一个接口，调用接口传参！！！