Vue踩坑填坑合集

vue-router传参params为空

情景

在使用vue-router时，通过this.$router.push()进行路由跳转，传参params为空

解决方法

params传参

路径不能使用 path 只能使用 name，否则 params 将无效

1
2
3
4

this.$router.push({
    name: '...', 
    params: {id: '...'}
})

取数据：this.$route.params.id

query传参

路径可以使用 path 或者 name

1
2
3
4

this.$router.push({
    path: '/xxx', 
    query: {id: '...'}
})

取数据：this.$route.query.id

使用=将整个表单赋值的深浅拷贝问题

观察下面这条语句：

1

this.form = this.temp;

其中，form和temp都是字典类型的数据，这里你是不是以为这条语句的作用是将temp的值赋给了form。但是当我们用alert(this.form === this.temp)的时候，输出值为true。因此，这里的=赋值偷偷启动了浅拷贝。

为了避免这种情况，换种思路进行深拷贝即可：

1
2
3
4
5

tempToForm() {
    for (let key in this.temp) {
        this.form[key] = this.temp[key]
    }
},

最新方法

通过json的方式实现

1
2
3
4
5

function (obj) {
    let tmp = JSON.stringify(obj); 
    let result = JSON.parse(tmp); 
    return result;
}

vue中的name的作用

官方文档如下：

这个解释并不通俗易懂，下面是比较直白的解释：

递归组件运用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <article>
    <div class="item" v-for="(item,index) in list" :key="index">
      <div class="item-title">
        <span class="item-title-ticket"></span>
        {{ item.title }}
      </div>
      <div v-if="item.children" class="item-children">
        <detail-list :list="item.children"></detail-list>
      </div>
    </div>
  </article>
</template>
<script>
export default {
  name: "DetailList",  /*指组件自身组件调用自身组件*/
  props: {
    list: Array
  },
  data() {
    return {};
  }
};
</script>

keep-alive

keep-alive包裹动态组件时，会缓存不活动的组件实例，会出现include和exclude属性，包含或者排除指定name组件

1
2
3
4
5
6
7

<div id="app"> 
   <keep-alive exclude="compA">
      <router-view/>
   </keep-alive>
</div>

exclude="compA"   /*keep-alive属性对compA组件不生效*/

vue-tools插件调试

• 组件未定义name属性
• 组件将显示成，这很没有语义
• 通过提供name选项，可以获得更有语义信息的组件树