Vue项目中的问题记录

获取URL地址中的参数（非路由传）

在项目中遇到了外链形式的跳转到项目中，并携带参数，方法记录一下，方便查找

const getQueryParameters = (options) => {
  const url = options
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search)
    .replace(/"/g, '\\"')
    .replace(/&/g, '","')
    .replace(/=/g, '":"') + '"}')
}
export default {
  mounted () {
    const url = location.href
    const params = getQueryParameters(url)
    console.log(params, 'params')
    this.$router.push({
      name: 'approval',
      query: {
        ids: params.processInstanceId,
        taskId: params.id,
        name: params.processTypeCode,
        taskName: params.name,
        code: params.userCode
      }
    })
  } 

表格 多余文字不显示 鼠标移上显示标题 => div标签加上:title 就是标题了

<div slot="returnParameter" slot-scope="text" :title="text.returnParameter" :style="{maxWidth: '300px',whiteSpace: 'nowrap',textOverflow: 'ellipsis',overflow: 'hidden', wordWrap: 'break-word', wordBreak: 'break-all' }" >
          {{text.returnParameter}}
 </div>

vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

const route = [
    {
      path: '/',
      name: '首页',
      component: () => import('./Home.vue')
    },
    // 正常情况下编写路由
    {
      path: 'XXX',
      name: 'XXX',
      component: () => import('./XXX')
    },
    // *匹配所有的路径，（正确就匹配正确的的path）如果没有该路径的话，就跳转到404页面
   // 一定要放到最后面写， 代码执行顺序关系
    {
      path: '*',
      component: () => import('./404.vue')
    },
]

修改UI样式(提升样式权重，深层查找)

<style>
/deep/ .box {
    color: red !important;
}
</style>

v-if 和 v-for 不应该出现在同一个标签上边，程序会先解析v-for，然后解析v-if, 这样会造成每次循环时都执行一次v-if， 性能不好；解决方法是 应在computed中把自己的条件返回

<ul v-if="isShow"> // 条件是arr的长度大于3 才渲染
  <li v-for="item in arr" :key="item.id">{{item.id}}</li>
</ul>
// computed
isShow () {
  return this.arr && this.arr.length > 3
}

可编辑表格验证列重复

// 可以把数据源里要验证的那一项拿出来，逐一去验证
const obj = {}
  obj.line = this.listCharacter.map(item => +item.line)
  obj.rank = this.listCharacter.map(item => +item.rank)
  for (const key in obj) {
    if (key === 'line') {
    // 拿到重复的 那一项，返回数组
      const a = obj[key].filter((item, idx, self) => self.indexOf(item) !== idx)
      if (a.length) {
      // length大于0，就是有重复的
        this.$message.error('行:' + a + '已经存在', 3)
        return
      }
    }
  }