【碎片学习】—— Vue项目重要知识点笔记（一）

前言：本文学习摘要自掘金作者愣锤的博文

---

 一、列表进入详情页的传参问题

<router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link>

http://localhost:8080/#/detail?id=1，可以看到传了一个参数id=1，并且就算刷新页面id也还会存在。此时在c页面可以通过id来获取对应的详情数据，获取id的方式是this.$route.query.id

vue传参方式有：query、params+动态路由传参。

// query通过path切换路由
<router-link :to="{path: 'Detail', query: { id: 1 }}">前往Detail页面</router-link>
// params通过name切换路由
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

query通过this.$route.query来接收参数，params通过this.$route.params来接收参数。　　

// query通过this.$route.query接收参数
created () {
    const id = this.$route.query.id;
}

// params通过this.$route.params来接收参数
created () {
    const id = this.$route.params.id;
}

query传参的url展现方式：/detail?id=1&user=123&identity=1&更多参数　

params＋动态路由的url方式：/detail/123　

4.params动态路由传参，一定要在路由中定义参数，然后在路由跳转的时候必须要加上参数，否则就是空白页面：

{      
    path: '/detail/:id',      
    name: 'Detail',      
    component: Detail    
},

注意，params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了。这对于需要依赖参数进行某些操作的行为是行不通的，因为你总不可能要求用户不能刷新页面吧。 例如：

// 定义的路由中，只定义一个id参数
{
    path: 'detail/:id',
    name: 'Detail',
    components: Detail
}

// template中的路由传参，
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数，而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>

// 在详情页接收
created () {
    // 以下都可以正常获取到
    // 但是页面刷新后，id依然可以获取，而token此时就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

二、本地开发环境请求服务器接口跨域的问题

proxyTable: {
      // 用‘/api’开头，代理所有请求到目标服务器
      '/api': {
        target: 'http://jsonplaceholder.typicode.com', // 接口域名
        changeOrigin: true, // 是否启用跨域
        pathRewrite: { //
          '^/api': ''
        }
      }
}

注意：配置好后一定要关闭原来的server，重新npm run dev启动项目。不然无效。　　

三、axios封装和api接口的统一管理

axios的封装，主要是用来帮我们进行请求的拦截和响应的拦截。

1、在请求的拦截中我们可以携带userToken，post请求头、qs对post提交数据的序列化等。

2、在响应的拦截中，我们可以进行根据状态码来进行错误的统一处理等等。

四、UI库的按需加载

vant库、antiUi、elementUi等，很多ui库都支持按需加载，可以去看文档，上面都会有提到。

基本都是通过安装babel-plugin-import插件来支持按需加载的，使用方式与vant的如出一辙，可以去用一下。

五、如何优雅的只在当前页面中覆盖ui库中组件的样式

通过深度选择器解决

.van-tabs /deep/ .van-ellipsis { color: blue};

这里的深度选择器/deep/是因为用的less语言，如果你没有使用less/sass等，可以用>>>符号。

六、定时器问题

定时器不清除，是非常耗性能的

方案一：

1、在data函数里面进行定义定时器名称：

data() {            
    return {                              
        timer: null  // 定时器名称          
    }        
},

2、然后这样使用定时器：　

this.timer = (() => {
    // 某些操作
}, 1000)

3、最后在beforeDestroy()生命周期内清除定时器：　　

beforeDestroy() {
    clearInterval(this.timer);        
    this.timer = null;
}

这个方法有两点不好的地方：

• 它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
• 我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。

方案二：

通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。

const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);  
          
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

类似于其他需要在当前页面使用，离开需要销毁的组件(例如一些第三方库的picker组件等等)，都可以使用此方式来解决离开后以后在背后运行的问题

注：$once、$on、$off的使用

七、Vue-Awesome-Swiper基本能解决你所有的轮播需求

很多ui库(vant、antiUi、elementUi等)中，都有轮播组件，对于普通的轮播效果足够了。但是需要比较炫的效果时不够。

vue-awesome-swiper这个轮播组件，真的非常强大，基本可以满足我们的轮播需求。

swiper相信很多人都用过，很好用，也很方便我们二次开发，定制我们需要的轮播效果。vue-awesome-swiper组件实质上基于swiper的，或者说就是能在vue中跑的swiper。

八、mixins混入简化常见操作

开发中经常会遇到金钱保留两位小数，时间戳转换等操作。每次我们会写成一个公共函数，然后在页面里面的filters进行过滤。这种方法每次，但是感觉每次需要用到，都要写一遍在filters，也是比较烦呢！！！

1、新建一个mixins.js，把我们需要混入的内容都写在里面。

import { u_fixed } from './tool'

const mixins = {    
    filters: {        
        // 保留两位小数        
        mixin_fixed2 (val) {            
            return u_fixed(val)        
        },
        // 数字转汉字，16000 => 1.60万        
        mixin_num2chinese (val) {            
            return val > 9999 ? u_fixed(val/10000) + '万' : val;        
    }    
}}
export default mixins

2、这样的话，在我们需要的页面import这个js，然后声明一下混入就好，而后就可以像正常的方式去使用就好了。　　

import  mixins from '@/utils/mixins'

export default {

   name: ' VoteDetail',
   
   mixins: [mixins],

}

可以直接在页面内使用我们的过滤操作{{1000 | mixin_fixed2}}