Vue项目遇到的问题解决及优化，如提示框和页码显示_vue3 的 防止catch错误返回出现在页面上

路由问题：

1.路由组件无法缓存的问题。
这个问题有点傻，因为是通过给nav添加router-link标签来切换子页面的，当时想的就是router-link怎么实现缓存。有天晚上睡不着忽然想到了，router-link与router-view肯定是配套使用的，直接给父组件的router-view标签加一个keep-alive就行了。

<template> 
  <div class="wrapper">      
    <main-header/>     
    <doctor-sidebar/>     
    <div class="content-wrapper">       
     <keep-alive>         
      <router-view/>        
     </keep-alive>     
    </div>         
  </div>     
</template>
1
2
3
4
5
6
7
8
9
10

样式：

2.显示数组的多个对象，鼠标移入和点击有且只有一个对象的样式会变。问题：新的对象改变样式时原来的不会消失。
关于如何给选中的对象添加样式，我是用了动态绑定样式，给每个对象设一个布尔值属性，选中时就设置该对象布尔值为true，上述问题解决是在设置true的代码前用一个数组循环forEach。

// 为数组中的每个对象绑定单机函数chosen(),i参数index为当前对象的索引号
chosen (index) {
  this.arr.forEach (element => {
    element.ischosen = false 
  })
  this.$set(arr[index], 'ischosen', true)
}
1
2
3
4
5
6

3.样式改了谷歌浏览器一直刷新却没有效果
解决：尝试ctrl+F5,清除浏览器缓存。具体原因还不知道为什么，猜想是浏览器缓存太多跟人一样被麻木了，需要浇盆水清醒一下。

浏览器报错：

4.vuex报错:TypeError: WEBPACK_IMPORTED_MODULE_1_vuex.a.store is not a constructor.
解决：在store入口函数中，new Vuex.Store ，store中的s要大写

5.[Vue warn]: Computed property “xxxx” was assigned to but it has no setter.
解决：从store获取之后的xxxx数据，在组件代码中被修改了，所以需要在计算属性中重写其get和set方法。

computed:{
  ...mapState(['xxxx']),
  xxxx:{
    get() {
      return this.$store.state.xxxx
    },
    set()val {
      this.$store.state.xxxx = val
    }
  }
}
1
2
3
4
5
6
7
8
9
10

其他：

6.通过clear清除浮动解决外边距重叠问题，为什么在被清除浮动元素尾部加span元素没有用？
敲了一下代码发现只有块元素才起到清除浮动的作用，说明clear只对块元素有效。

7.自定义消息弹出框AlertTip，如用于显示是否确定删除、更新成功等消息。下面就以“确定删除”为例，构造一个提示框。
主要思路：定义一个块元素，里面包含一个p标签用于描述提示文字，两个按钮“确定”和“取消；因为提示框一般都在页面居中位置，所以设置该块元素水平和垂直方向居中，这里用的是绝对定位；块元素的出现与否由一个布尔值决定，再给“确定”和“取消添加相应的函数。
如何开启：给删除的按钮添加函数，设置上面的布尔值为true

<!--结构-->
<div v-show="isDeling" class="alertTip">
 <p>确定删除{{xxx}}吗</p>  // 如果要显示具体的删除哪一项xxx，可从data里读取。
 <input type="button" value="确定" @click="del" >
 <input type="button" value="取消" @click="cancelDel" >
<div>
1
2
3
4
5

/*样式，以下仅为主要代码*/
.alertTip{
  position:absolute; /*前提将其父元素（一般就是最外层）设置为相对定位*/
  width:300px;
  height:200px
  top:50%;
  left:50%;
  margin-top:-100px; /* height/2 */
  margin-left:-150px; /* width/2 */
}
.alertTip p, .alertTip input{
  position:absolute;
}
1
2
3
4
5
6
7
8
9
10
11
12

// 行为
del(nowIndex) {
  this.arr.splice(nowIndex, 1)
  this.isDeling = false
},
cancelDel() {
  this.isDeling = false
}
1
2
3
4
5
6
7

8.带有页数的表格显示，并且表格的数据来自于数组arr，用v-for循环显示。
主要思路：在data里定义一个空数组nowData，用于存放当前显示的n行数据；页数的自动计算由watch监视的数组arr实现。

<!--主要结构代码-->
<table>
  <thead>...</thead>
  <tbody>
    <tr v-for="(index, item) in nowData" :key="index">
      <td>{{item.xx}}</td>
      <td>{{item.yy}}</td>
    </tr>
  </tbody>
</table>
<ul>
  <li @click="previousPage">上一页</li>
  <li v-for="(index, item) in pages" :key="index" @click="choosePage(index)" 
      :class={active:item.chosen}>{{item.id}}</li>
  <li @click="nextPage">下一页</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 主要js代码

// arr：原数组
// nowN：每一页显示的行数
// nowData：当前页显示的数据，是原数组的一部分
// pageNum：总页数 
// pages：页数数组，比如有3页它就有3个对象，每个对象有两个属性：id，chosen，后者表示当前页是否被选中，默认为false
// 可能会疑问 pageNum = pages.length，为何要多此一举？因为pageNum 是根据arr和nowN来计算的，pages长度是由pageNum决定的，可以说它是pages的父亲，要省也只能省成pageNum = Math.seil(val.length/this.nowN)
// nowPage：当前页数，如当前第1页，则其值为1

mouted() {
  // 初始化计算页数和显示
  this.pageNum = Math.seil(val.length/this.nowN)
  for(let i = 1; i <= pageNum ; i++){
    this.pages.push({id: i, chosen: false})
  }
  this.nowPage = 0
  this.$set(this.pages[this.nowPage], 'chosen', true)
  this.nowData = this.arr.slice(0, this.nowN) 
},
watch:{
  // 如果在页面上有对原数组的增删操作，可以对其进行监视
  arr(val) {
    let temp = Math.ceil(val.length/this.nowN)
    if(temp > this.pageNum) {
      this.pages.push({id: temp, chosen: false})
    }else if(temp < this.pageNum) {
      this.pages.pop()
    }
    this.pageNum = temp
  },
  nowPage(val){
    this.pages.forEach(element =>{
      element.chosen = false
    })
    this.$set(this.pages[val], 'chosen', true)
    this.nowData = this.arr.slice(val*this.nowN, (val+1)*this.nowN)
  }
},
methods:{
  previousPage() {
    if(this.nowPage <= 0) {
      return
    }
    this.nowPage -= 1
    // 其余工作由nowPage的监视完成，下面同理
  },
  choosenPage(index) {
    this.pageNum = index
  },
  nextPage() {
    if(this.nowPage >= this.pageNum ){
      return
    }
    this.nowPage +=1
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

以上是写项目过程中遇到的部分问题及优化的地方，纯手打( •̀ ω •́ )y，有什么错误或者有更好的解决方法，欢迎各位老大不吝赐教~
ps：这个代码片都是一样颜色的么，明明已经设置了…