vue微信H5项目中遇到的问题

目录

 

1.跳转页面，页面数据刷新路由不变化

2.微信支付路由层级问题

4.微信缓存导致调整内容不生效

5.vue install报错npm ERR！code ERESOLVE

---

1.微信H5跳转页面，页面数据刷新路由不变化

这种情况使用$route无法获取到当前页面路由传递的参数
解决方案：通过window.location.href获取当前的url进行拼接跳转
            this.$router.replace({path: "/pinPage?"+this.GetQueryString('type')});

Methods:{
            GetQueryString(name){
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
                var r = window.location.href.split('?')[window.location.href.split('?').length-1].match(reg); 
                if (r != null) return unescape(r[2]); 
                return null; 
            },
}

2.微信支付路由层级问题

通过this.$router.replace({ name: "topin17Day",params:{id:that.$route.query.id} })跳转路由，使路由层级超过一层将无法调起支付
解决方案：改为query拼接，或使用？拼接
this.$router.replace({path: "/pinPage?"+this.GetQueryString('type')});
that.$router.replace({ path: '/pinPage',query:{id:gid,type:1} });

3.微信二次分享，url自动拼接?from=message，导致出现两个问号,参数获取失败
解决方案：通过获取最后一个问号后面的参数
            this.GetQueryString('type');

Methods:{
            GetQueryString(name){
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
                var r = window.location.href.split('?')[window.location.href.split('?').length-1].match(reg); 
                if (r != null) return unescape(r[2]); 
                return null; 
            },
}

4.微信缓存导致调整内容不生效

解决方案：Last-Modified是页面的最后生成时间，GMT格式；设置永远是最新的
这个问题首先要搞清楚微信的缓存机制。据我观察，开发中频繁更新html文件，并不会缓存。猜测和服务器返回的Last-Modified有关。并且抓包发现，缓存时，微信没有向服务器请求html文件，改变服务器过期时间并没有用。
touch -m -t 11151101 abcd.html
修改文件的修改时间到一个比较旧的时间点，访问网页立即触发了缓存。
这就比较简单了，Last-Modified永远是最新的不就解决了。
立即动手，改变一下nginx设置，比如我们用Vue框架，入口页/mall/index.html.
location = /mall/index.html {
add_header Last-Modified $date_gmt;
}

5.vue install报错npm ERR！code ERESOLVE

解决方案：npm降低版本

npm install npm@6.14.6 -g

sudo npm install n -g

sudo n 12.18.3

vue报错解决：The .native modifier for v-on is only valid on components but it was used on ＜input＞

事件的native修饰符只能在组件上使用，原生的html标签是不能使用的，这是因为我在input标签使用了native修饰符。

6.vue报错解决：npm ERR! vuemobilem@1.0.0 build: `node build/build.js`

目录

1.微信H5跳转页面，页面数据刷新路由不变化

2.微信支付路由层级问题

4.微信缓存导致调整内容不生效

5.vue install报错npm ERR！code ERESOLVE

vue报错解决：The .native modifier for v-on is only valid on components but it was used on ＜input＞

---

删除node_modules重新构建