vue.js开发SPA常见问题及解决方法

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

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

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

补充一下其他两种传参：

• 如果传参通过 <router-link :to="{name: 'Detail', params: {id:1}}">前往Detail页面</router-link> 的话,这种传参方式，params中的参数不会出现在url中，所以一旦刷新页面，id就不存在了，很懊恼有木有！！！刚开始我就在这里纠结了好一阵~~实际是因为没有发现更好的办法，被自己蠢到了！！！
• 还有一种传参的方式：动态路由传参。动态路由通过在路由文件中定义路由： { path: '/detail/:id', name: 'Detail', component: Detail } ，就是这里 /detail/:id ，然后在页面进行传参 <router-link to="/detail/123">前往d页面</router-link> ,在详情页可以通过 this.$route.params.id 获取传来的参数，url会显示为 http://localhost:8080/#/detail/123 ，且刷新页面参数也会存在。对于传单个参数，这种方式实现了我们的需求，但是没法传多个参数。除非定义路由的时候，定义为'/detail/:id/:param1/param2/param3'，这样限制死了，必须要这样传参数。且个人角度看来，这种 /detail/1/123/1d 的url不如 detail?id=1&user=123&identity=1 来的优雅。

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

上面的这个报错大家都不会陌生，报错是说没有访问权限（跨域问题）。本地开发项目请求服务器接口的时候，因为客户端的同源策略，导致了跨域的问题。

vue-cli初始化的项目，在配置文件中提供了proxyTable来解决本地开发的跨域问题。config文件的index.js文件中，找到proxyTable选项，进行如下配置：

proxyTable: {

      // 用‘/api’开头，代理所有请求到目标服务器

      '/api': {

        target: 'http://jsonplaceholder.typicode.com', // 接口域名

        changeOrigin: true, // 是否启用跨域

        pathRewrite: { //

          '^/api': ''

        }

      }

}

例如请求接口： /api/posts/1 ==> http://jsonplaceholder.typicode.com/posts/1

这个时候就可以在本地环境请求后台接口了。

axios的封装和API接口的统一管理:

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

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

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

axios接口的统一管理，是做项目时必须的流程。这样可以方便我们管理我们的接口，在接口更新时我们不必再返回到我们的业务代码中去修改接口。

由于这里内容稍微多一些，日后放在另一篇文章，更新后这里会送上链接。

UI库的按需加载:

为什么要使用按需加载的方式而不是一次性全部引入，原因就不多说了。这里以vant的按需加载为例，演示vue中ui库怎样进行按需加载：

• 安装： cnpm i vant -S
• 安装babel-plugin-import插件使其按需加载： cnpm i babel-plugin-import -D
• 在 .babelrc文件中中添加插件配置 ：

libraryDirectory { 

    "plugins": [

        // 这里是原来的代码部分

        // …………

        // 这里是要我们配置的代码

        ["import",

            {

                "libraryName": "vant",

                "libraryDirectory": "es",

                "style": true

            }

        ]

    ]

}

• 在main.js中按需加载你需要的插件：

import {

    DatetimePicker,

    Button,

    List

} from 'vant';

• 使用组件：

// 使用vant组件

Vue.use(DatetimePicker)

    .use(Button)

    .use(List);

• 最后在在页面中使用：

<van-button type="primary">按钮</van-button>

补充：出来vant库外，像antiUi、elementUi等，很多ui库都支持按需加载，可以去看文档，上面都会有提到。基本都是通过安装babel-plugin-import插件来支持按需加载的，使用方式与vant的如出一辙，可以去用一下。

定时器问题:

我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示：

解决思路很简单：

首先我在data函数里面进行定义定时器名称：

data() {

    return {

        timer: null  // 定时器名称

    }

},

然后使用的定时器的这样使用 this.timer = setInterval(……………………)

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

beforeDestroy() {

    clearInterval(this.timer);

    this.timer = null;

}

rem文件的导入问题：

我们在做手机端时，适配是必须要处理的一个问题。例如，我们处理适配的方案就是通过写一个rem.js，原理很简单，就是根据网页尺寸计算html的font-size大小，基本上小伙伴们都知道，这里直接附上代码，不多做介绍。

这里说下怎么引入的问题，很简单。在main.js中，直接 import './config/rem' 导入即可。import的路径根据你的文件路径去填写。

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

在我们使用的很多ui库（vant、antiUi、elementUi等）中，都有轮播组件，对于普通的轮播效果足够了。但是，某些时候，我们的轮播效果可能比较炫，这时候ui库中的轮播可能就有些力不从心了。当然，如果技术和时间上都还可以的话，可以自己造个比较炫的轮子。

这里我说一下vue-awesome-swiper这个轮播组件，真的非常强大，基本可以满足我们的轮播需求。swiper相信很多人都用过，很好用，也很方便我们二次开发，定制我们需要的轮播效果。vue-awesome-swiper组件实质上给予swiper的，或者说就是能在vue中跑的swiper。下面说下怎么使用：

• 安装 cnpm install vue-awesome-swiper --save
• 在组件中使用的方法，全局使用意义不大：

// 引入组件

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

// 在components中注册组件

components: {

    swiper,

    swiperSlide

}

// template中使用轮播

// ref是当前轮播

// callback是回调

// 更多参数用法，请参考文档

<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">

    <!-- slides -->

    <swiper-slide><div class="item">1</div></swiper-slide>

    <swiper-slide><div class="item">2</div></swiper-slide>

    <swiper-slide><div class="item">3</div></swiper-slide>

    <swiper-slide><div class="item">4</div></swiper-slide>

    <swiper-slide><div class="item">5</div></swiper-slide>

    <swiper-slide><div class="item">6</div></swiper-slide>

    <swiper-slide><div class="item">7</div></swiper-slide>

    <!-- Optional controls -->

    <div class="swiper-pagination"  slot="pagination"></div>

    <div class="swiper-button-prev" slot="button-prev"></div>

    <div class="swiper-button-next" slot="button-next"></div>

    <div class="swiper-scrollbar"   slot="scrollbar"></div>

</swiper>

// 参数要写在data中

data() {

    return {

        // swiper轮播的参数

        swiperOption: {

            // 滚动条

            scrollbar: {

                el: '.swiper-scrollbar',

            },

            // 上一张，下一张

            navigation: {

                nextEl: '.swiper-button-next',

                prevEl: '.swiper-button-prev',

            },

            // 其他参数…………

        }

    }

},

打包后生成很大的.map文件的问题

项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 而生成的.map后缀的文件，就可以像未加密的代码一样，准确的输出是哪一行哪一列有错可以通过设置来不生成该类文件。但是我们在生成环境是不需要.map文件的，所以可以在打包时不生成这些文件：在config/index.js文件中，设置 productionSourceMap: false ,就可以不生成.map文件

fastClick的300ms延迟解决方案

开发移动端项目，点击事件会有300ms延迟的问题。至于为什么会有这个问题，请自行百度即可。这里只说下常见的解决思路，不管vue项目还是jq项目，都可以使用fastClick解决。

安装 :

cnpm install fastclick -S

在main.js中引入和初始化:

import FastClick from 'fastclick'; // 引入插件

FastClick.attach(document.body); // 使用 fastclick

组件中写选项的顺序

export default {

  name: '',

  mixins: [],

  components: {},

  props: {},

  data() {},

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}

};

export default new Router({

  routes: [

        {

            path: '/',

            name: 'Index',

            component: resolve => require(['@/view/index/index'], resolve)

        }

   ]

})

build: {

    ………………

    productionGzip: true, // false不开启gizp，true开启

    ………………

}