知识精华—前端各种知识点汇总2

依我自己的技术为参照物来定义是不是精华

主要参考出的项目：https://github.com/PanJiaChen/vue-element-admin/tree/master/src，很好的，推荐

作者：花裤衩

（1）element-ui，侧边栏不能跟着路由进行高亮，element-ui官方已经给了default-active，所以只要

:default-active = "$route.path"

将default-active一直指向当前路由就可以了

（2）有关登录的时候，是只在cookie存储token，还是把一些用户信息一起进行存储？

假如把用户信息和用户名也存储在了本地，但我这个时候用另外一台电脑修改了自己的用户名，之后再用这台存有之前用户信息的电脑登录，它默认会去读取本地cookie中的名字，并不会去拉取新的用户信息

所以一般的流程是：页面会写从cookie中检查是否存有token，没有就去重新登录，有的话就直接用token返回给后端获取最新的用户信息，保证用户信息是最新的

当然如果要是做了单点登录功能的话，用户信息存储在本地也是可以的，当另一台电脑登录的时候，另一个会被下线，所有总会重新登录获取最新的内容，得到最新的用户信息

而且从代码层面我建议还是把两件事分来来比较好，在这个后端全面微服务的年代，后端同学也想写出优雅的代码

（3）比如进入详情页面的时候，以为是同一个组件，所以页面不会重新刷新，不会走生命周期created、mounted等的解决方法

3.1：我之前的解决方法是，把每一个数据都赋值为同一个变量，通过检测数据是否变化来解决页面刷新的问题，但是这个我感觉效率没有下面的这中办法好（个人主观感觉，并没有验证）

3.2：大神的解决办法，我们监听侧边栏每个link 的 click事件，每次点击都给router push 一个不一样的query 来确保会重新刷新view，但这也有一个弊端就是 url 后面有一个很难看的 query 后缀如 xxx.com/article/list?t=1496832345025

clickLink(path) {
  this.$router.push({
    path,
    query: {
      t: +new Date() //保证每次点击路由的query项都是不一样的，确保会重新刷新view
    }
  })
}

 3.3：又看到了一种写法

我创建和编辑的页面使用的是同一个component,默认情况下当这两个页面切换时并不会触发vue的created或者mounted钩子，官方说你可以通过watch $route的变化来做处理，但其实说真的还是蛮麻烦的。后来发现其实可以简单的在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了。这样简单的多了。

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

（4）table

想改变table中的第一条数据，通过this.list[0]=newValue这样是不会生效的，

解决方案：

解决方案：
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

所以我们通过：

//添加数据
this.list.unshift(this.temp);

//删除数据 
const index = this.list.indexOf(row); //找到要删除数据在list中的位置
this.list.splice(index, 1); //通过splice 删除数据

//修改数据
const index = this.list.indexOf(row); //找到修改的数据在list中的位置
this.list.splice(index, 1,this.updatedData); //通过splice 替换数据 触发视图更新

这样可以直接改变视图

（5）tabs

tab在后台项目中也比较常用的。假设我们有四个tab选项，每个tab都会向后端请求数据，但我们希望一开始只会请求当前的tab数据，而且tab来回切换的时候不会重复请求，只会实例化一次。首先我们想到的就是用v-if 这样的确能做到一开始不会挂载后面的tab，但有一个问题，每次点击这个tab组件都会重新挂载一次，这是我们不想看到的，这时候我们就可以用到<keep-alive>了

<el-tabs v-model="activeTab">
  <el-tab-pane label="简介及公告" name="announcement">
    <announcement />
  </el-tab-pane>
  <el-tab-pane label="资讯" name="information">
    <keep-alive>
      <information v-if="activeTab=='information'" />
    </keep-alive>
  </el-tab-pane>
  <el-tab-pane label="直播流配置" name="stream">
    <keep-alive>
      <stream v-if="activeTab=='stream'" />
    </keep-alive>
  </el-tab-pane>
</el-tabs>

（6）在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符，从易用性的角度出发，我们对 Button 组件进行了处理，使它可以监听 click 事件，但是对于其他组件，还是需要添加 .native 修饰符。

<my-component @click.native="handleClick">Click Me</my-component>
<el-button @click="handleButtonClick">Click Me</el-button>

（7）如何在 Table 组件的每一行添加操作该行数据的按钮？

使用 Scoped slot 即可：

<el-table-column label="操作">
  <template slot-scope="props">
    <el-button @click.native="showDetail(props.row)">查看详情</el-button>
  </template>
</el-table-column>c

（8）修改element样式问题

两种解决方法

8.1：子组件的style中不添加scoped，这样这个组件中你的样式就是全局的样式，要是怕污染其他的组件，可以为这个组件的最外层的标签添加一个独一无二的类或者是添加一个id

8.2：就是新建一个scss文件，在main中进行引用

（9）跨域问题

9.1：我最推荐的也是我司常用的方式就是**cors**全称为 Cross Origin Resource Sharing（跨域资源共享）。这玩意对应前端来说和平时发请求写法上没有任何区别，工作量基本都在后端这里。每一次请求浏览器必须先以 OPTIONS 请求方式发送一个预请求，从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求。推荐的原因是只要第一次配好了，之后不管有多少接口和项目复用就可以了，一劳永逸的解决了跨域问题，而且不管是开发环境还是测试环境都能方便的使用。

9.2：但总有后端觉得麻烦不想这么搞。那前端也是有解决方案的，在 dev 开发模式下可以下使用**webpack 的 proxy使用也是很方便的看一下文档就会使用了，楼主一些个人项目使用的该方法。但这种方法在生成环境是不适用的。在生产环境中需要使 用Nginx反向代理** 不管是 proxy 和 nginx 的原理都是一样的通过搭建一个中转服务器来转发请求规避跨域的问题。

具体方式介绍在我的另一篇博客中:https://blog.csdn.net/zhumizhumi/article/details/78894501