Vue项目踩的坑

 

1.vue-router有两种模式  hash  和history  （前端路由）

 默认模式为hash， vue中使用router-link  to=`/home`  替代a标签 
   hash   修改 #后路径 并且#后路径不发送给服务器  
   history API 无# 可以前后跳转 但是怕回车  服务器没有配置对应路径指向同一个html文件就回404  mode=history 改为history模式

2.dev 与 build 的路径问题 

尽量使用相对路径而不是绝对路径 不然在服务器上根目录变化路径会报错

3.图片路径在变量里 打包出现解析不了路径的问题

  会把解析完的src变量当成字符串处理而不会去找到打包对应的位置。

  解决方法：1.使用线上的图片地址（需要先写好接口）

                    2.requiren引入图片

4.状态管理vuex / store

状态管理:是用来单个同步组件在不同页面的状态的，如tab-bar、购物车等。

如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享：

1.如果只有简单的几个组件状态共享，我们采用一个简单的 store 模式：

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}

2.如果复杂的话引入vuex 

vuex.vue:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		isLogin:false,
	},
	mutations:{
		//改变登陆状态
		handleLogin(state){
			state.isLogin = true;
		}
	}
})

app.vue:

import store from './vuex'
import Vue from 'vue'
import App from './App'
import router from './router'
// 注入全局组件
import './components'

window.$vm = new Vue({
  el: '#app',
  router,
  store:store,
  components: {
    App
  },
  template: '<App/>'
})

package.json导入vuex。  创建 vuex.Store 仓库对象用来保存全局的状态。再把store在实例里注册。

Store中state用来存储数据。 可以在需要的地方this.$store.state中取到值。并且state中的值只能通过mutations中的方法改变。

在需要的地方this.$store.commit('‘方法名’，‘选填参数’)；

例：

this.$store.commit({
	type:'handleGoodsCar',
	goodsInfo:goodsInfo,
    aaaa:123
})
handleGoodsCar(state,params){
	var goodsInfo = parames.goodsInfo;
    var aaaa = params.aaaa;
}

5router-link 绑定事件无效

需要加.native   

.native是什么？  .native - 监听组件根元素的原生事件。 

主要是给自定义的组件添加原生事件。 而router-link就是用的别人定义的自定义组件 使能像H5标签一样接受事件

6.组件、弹窗切换缓动动画

<transition name="fade">
	  <div class="sign-success" v-if="showSignSuccess">
	         <span>签到成功，获得{{sign_data[today].integral}}积分</span>
	  </div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

transtition标签里name可以定义变化类型 对应css写下变化效果。需要通过v-if  v-show来控制变化。

模块和引入的组件都可以使用。

7.router切换左右拉效果、引入VUEX 添加路由切换效果

vue有对应的切换组件。 只需要用transition包裹住切换的组件就行。 不同页面多种切换类型 可以设置动态name改变

注意：如果vuex会尽量复用组件、如果两个组件类似被复用了就不会有动效了！。可以添加一个key属性保证不复用。

<transition :name="transitionName">
        <router-view class="child-view"></router-view>
</transition>

8.路由守卫

创建路由就有router.beforEach方法。在跳转url时候。to就是下一个url。from是当前url。

如要给不同页面配置不同的访问效果。可以在路由中配置meta属性，可以在ro和from下面取到。

export default new Router({
  routes: [
  {
    path: '/index',
    name: '/index',
    component: resolve => require(['@/pages/index'], resolve),
  }，
  {
  	path:'/user',
    name:'/user',
    component: resolve => require(['@/pages/user'], resolve),
    meta:{
    	requireAuto:true //添加改字段，表明该页面需要验证登陆状态才可以进入
    }
  }
  ]
})

//路由跳转时，判断该页面是否是需要登陆才能访问的。必须要调用next函数才会继续执行。
router.beforeEach((to,from,next) => {
	if(to.meta.requireAuto){
		if(!store.state.isLogin){
			console.log('不给进');
			router.replace({path:'/index'});
		}
		next();
		console.log('切换回index');
	}else{
		next();
		console.log('无序授权页面');
	}
   })
//路由全局跳转后钩子事件 用来重置到页面最上位置。不用next参数
router.afterEach((to,from) => {
  	window.scrollTo(0,0);
})

9.保存登录状态。

本地存储信息方式有 sessionStorage localstorage  cookie

1.可以在vuex中保存登录之后的状态。  但一刷新后就没有了

2.保存在sessionStorage中页面关闭前一直有效。刷新后在session中获取。但你关了页面后数据就没了

3.可以在localstorage中也保存一份账号密码。在服务端设置一段过期时间。每次打开页面获取数据。

10.分享承接页

11.多级路由

12.微信分享需要签名

13.页面跳转传递数据

 （1）.路由参数

              1.name + params 

                     页面就不用router-link跳转了。绑定个click事件。用this.$router.push方法跳转（注意是使用 name 来配合params传值跳转）   (push方法跳会在history里留下痕迹 如果不想返回上一个页面可用 replace 调用方法与push一直，只是效果为替换当前页不留下history痕迹)

传递页如下：

toAddress(region_codes_, address_, id_) {
	this.$router.push({
		name: '/address',
		params: {
			region_codes: region_codes_,
			address: address_,
			id: id_
		}
	})
},

跳转页如下：可以通过 this.$router.params.XXX来取到对应设置的值

let region_codes = this.$route.params.region_codes;
let address = this.$route.params.address;
let id = this.$route.params.id;

               2.path + query

             使用方法与第一种类似，只是 path 替代了name     。 query 替代 params .。

获取值的时候由this.$route.params.XXX  变成了this.$route.query.XXX

 TIPS：1.区别是query配置的参数会在url显示出来 。( 例子：/index？id=1    参数以？拼接在url后方便刷新时获取)

            2.params 需要为对应router 设置name属性。（例子：/index  隐藏参数）

            3.在router里设置参数，再router-link里设置传值的方式（例子：/index/1    这种后台过滤了页面后刷新可能会找不到页面）

 （2）.使用vuex进行数据传递

14.页面缓存

app.vue中设置keep-alive标签用来设置缓存页面。有部分页面不需要缓存的话 可在router中为每页配置对应的meta（keepAlive）属性进行判断、

{
    path: '/index',
    name: '/index',
    component: resolve => require(['@/pages/index'], resolve),
    meta:{
    	keepAlive:true
    }
  }

<keep-alive>
	<router-view v-if="$route.meta.keepAlive" class="child-view"></router-view>
</keep-alive>
<router-view class="child-view"></router-view>

15.数据交互方式。

跨域请求数据一般两种方式。

1.CORS "跨域资源共享"(Cross-origin resource sharing)

 后台配合开启。可完成get post 等简单请求。vue中推荐使用的 axios （也只支持这种方法！）

2.jsonp。

  也要处理接口能使用jsonp。常用jquery里封装的$.ajax方法。会自动调用回函函数、

16.http请求拦截器 与 响应拦截器

  请求拦截器即在发送请求之前做处理 例如 config.Api + path来配置url请求路径。

  响应拦截器即在返回后做相应处理  例如 返回为400时候 提示请求失败、

Tips: 1.数据交互方式推荐使用 axios + cors  而不是 jq + jsonp 。因为axios里做拦截器更便捷。且jsonp的拦截器有点小问题。

17.使用vuex中数据同步刷新

1.vue中data里变量值改变了，在本页面中所有使用的地方都会刷新

2.如果data中的数据是通过别的地方赋值的（想获取vuex里的数据），那么在vuex中的数据改变时候。data中数据不会同步刷新。因为data属性只是在组件实例化时赋值一次。

 如果想使用vuex中数据。且实时刷新 使用computed。

3.computed 是依赖于后者的计算属性。当vuex值改变时候。当前页面数据也会刷新。

18.本地mock数据

在后台接口未实现前、前端可以根据接口规范 先使用本地模拟数据进行页面制作、

常见的有 mock.js 。安装依赖 后在main中引用、为对应的url 配置返回数据。 即可在请求时候拦截、用mockHttpResquest对象替代作为返回数据。

Tips: 数据交互方式推荐使用 axios + cors  而不是 jq + jsonp 。因为mock.js是用mock对象替代返回的是。只支持ajax  不支持jsonp、

19.fixed定位挡住下拉内容

类似tabbar在最下方。 但是不在文档流里面 所以内容最下面一部分会被挡住。

目前做法是在tabbar组件里 再加上一个等高的div占据文档流的位置。（封在一个组件里）

Tips:有些页面是有选项卡的用来transtion组件。 就必须为absolute 。脱离文档流了。 可以把整体作为transtion组件就会在一个文档流里了

注意不能：在absolute里面给个等高下边距。ios有bug不生效

20.使用组件库（vex,swiper等）修改组件样式

在没提供修改方式的情况下。需要通过覆盖组件类名的方法修改样式。但注意如果开启了scoped 样式就只会作用于本页面。修改不了组件样式

21.swiper组件的使用。

swiper组件比vux的组件功能更全面。 但如果你已经引用了vux 。再组件化引入swiper可能会冲突。

建议就引入原生swiper使用。使用方法及配置与官网一致。

vue中使用原生swiper的方法：

1.安装  npm install vue-awesome-swiper --save

2.引入swiper   在main.js中  

import Vue from 'vue'
import 'swiper/dist/css/swiper.css' 
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

在要使用的组件中

<div class="swiper-container banner" id="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide swiper-no-swiping">
			<img class="w100" src="../../static/images/index/banner.png" alt="" />
		</div>
		<div class="swiper-slide swiper-no-swiping">
			<img class="w100" src="../../static/images/index/banner.png" alt="" />
		</div>
	</div>
	<div class="swiper-pagination pagination" slot="pagination"></div>
</div>

import Swiper from 'swiper'
//在mounted中注册配置swiper
var mySwiper = new Swiper('#swiper', {
	pagination: '.swiper-pagination',
	loop: true,
	effect: 'coverflow',
	slidesPerView: 1.02,
	centeredSlides: true,
	coverflow: {
		rotate: 0,
		stretch: 0,
		depth: 100,
		modifier: 2,
		slideShadows: false
	}
})

22.select与省市级联选项

要绑定省市级联地址可以使用vux的 x-address组件。

select中用v-model绑定属性。 第一条为默认不可选取的提示语（要设置需要将group_id制空就会默认选中第一项）。

v-bind:value="" 绑定每一个选项的值。

<select required v-model="group_id" name="dealer">
	<option value="" disabled selected hidden>经销商名称</option>
	<option v-for="option in list_info.list" v-bind:value="option.id">
		{{option.name}}
	</option>
</select>

23.jssdk 签名问题

签名成功需要发送请求前与签名后的url一致才能成功、如果url变了签名就没用了（需要动态重新加载一遍）。

1.需要注意的是有些需要微信授权的应用首次访问URL会有跳转导致签名失败。

2.vue单页面应用 ios url会停留在首次进入的页面。因此只需要首次加载一次签名就好了 。而安卓正常 需要每个页面都动态加载一次。（这里需要区别处理）