极客观点
项目管理
HarmonyOS
已经解决
1.环境：安卓4.4.2版本 微信；使用vue-cli构建的项目；vue-router版本0.7.13；vue版本1.0.26
2.基本情况：其他浏览器一切正常，但在此版本微信中，在未登录情况下，数据可以正常加载，一旦登录，路由切换至首页，界面就不再渲染了，而请求都是成功的。
登录状态是通过token和用户资料来判断的，token存储于cookie中，而用户资料存储在localStorage中。
登录注册部分的路由结构如下
'/passport': {
name: 'passport',
component: Passport,
subRoutes: {
'/login': {
name: 'login',
component: Login
},
'/register': {
name: 'register',
component: Register
}
}
}首页的路由
'/home': {
name: 'home',
component: Home
}奇怪的是，只要我是登录状态，下次我直接打开首页，数据请求成功，界面却还是不会渲染，而且它也不报错，这个问题太困扰我了，我查了vue和vue-router的issue也没啥收获。
home组件主要代码
<template>
<div class="home-view">
<div class="content">
<!-- 认证提醒 -->
<v-reminder v-if="accountStatus == 0"></v-reminder>
<!-- banner -->
<swiper :list="banners" class="home-banner" dots-position="center"></swiper>
<!-- 公告 -->
<v-board :notices="notices"></v-board>
<!-- 首页栏目分类tab -->
<v-tab class="home-tab">
<v-tab-item v-for="tab in tabs" @click="changeTab($index)" track-by="$index" :text="tab.text" :view="tab.view" :class="{'active':tab.active}"></v-tab-item>
</v-tab>
<component :is="currentView" keep-alive></component>
</div>
<!-- 底部导航 -->
<v-navigation-bar></v-navigation-bar>
</div>
</template>export default {
data() {
return {
currentView: vHomeNews,
accountStatus: '',
//swiper动态插入存在bug，必须初始化一个空{}
banners: [{}],
notices: [],
cache: [],
tabs: [
{
active: true,
text: "xxxx",
view: 'vHomeNews'
},
{
active: false,
text: "yyyy",
view: 'vHomeFunds'
},
{
active: false,
text: "zzzz",
view: 'vHomeProjects'
}
]
}
},
created() {
if (localStorage.getItem('userInfo')) {
let userInfo = JSON.parse(localStorage.getItem('userInfo'));
this.accountStatus = userInfo.account_status;
}
},
route: {
data() {
$.post(api.getBannerandNotice, (res) => {
if (res.code === 1) {
this.notices = res.data.news;
this.banners = res.data.banner;
} else {
Toast(res.msg);
}
}, 'json');
}
},
components: {
vNavigationBar,
Swiper,
SwiperItem,
vReminder,
vBoard,
vTab,
vTabItem
...
},
methods: {
changeTab(index) {
this.tabs.forEach((item) => {
item.active = false;
});
this.currentView = this.tabs[index].view;
this.tabs[index].active = true;
}
}
}登录组件主要代码
<div class="register-view ">
<form>
<v-form-group :icon="'icon-mobile'" :model-val.sync="mobile" :placeholder="'手机号码'" :input-type="'tel'">
<v-sms-code slot="ft" class="input-group-addon" :type="'login'" :mobile="mobile"></v-sms-code>
</v-form-group>
<v-form-group :icon="'icon-validate'" :model-val.sync="smsCode" :placeholder="'验证码'"></v-form-group>
<button :disabled="disabled" @click.prevent="tryLogin" type="submit" class="passport-submit weui_btn weui_btn_primary">
登录</button>
</form>
<a class="passport-link" v-link="'/passport/register'">注册</a>
</div>export default {
data() {
return {
mobile: '',
smsCode: '',
disabled: false
}
},
route: {
activate() {
if (CookieUtil.get('userid') && localStorage.getItem('userInfo')) {
this.$route.router.go('/home');
}
}
},
components: {
vSmsCode,
vFormGroup
},
methods: {
tryLogin() {
//验证手机格式
if (!util.isMobile(this.mobile)) {
Toast('请输入正确手机格式');
return false;
}
//验证码不为空
if (util.isNull(this.smsCode)) {
Toast('验证码不能为空');
return false;
}
$.post(api.login, {
'mobile': this.mobile,
'code': this.smsCode
}, (res) => {
if (res.code === 1) {
let expireDate = new Date(Date.now() + 14 * 24 * 60 * 60 * 1000);
CookieUtil.set('userid',res.data.token,expireDate);
localStorage.setItem('userInfo',JSON.stringify(res.data.userinfo));
Toast('登录成功');
this.$route.router.go('/home');
this.disabled = false;
} else {
Toast({
message: res.msg,
iconClass: 'weui_icon_msg weui_icon_warn'
});
this.disabled = false;
}
}, 'json');
}
}
}微信截图：我在请求的回调里加入alert并不能执行，但是请求却是成功的。
试了好多次，感觉像是回调函数没办法执行，但不知道原因在什么地方
更新：
将post方法改成$.ajax，发现请求成功后走的是error回调
更新
在登录状态，后端返回的内容不是严格的json格式
在render里加个breakpoint，看是否调用了？