Vue开发遇到的部分问题
页面刷新后Vuex内容被清空
解决方案:刷新触发事件时将VUEX数据保存到localStorage中
ios(Safari)不支持"beforeunload"事件,要使用"pagehide"事件
created() {
//ios刷新时vuex信息保留
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
//在页面刷新时将vuex里的信息保存到缓存里
window.addEventListener("pagehide", () => {
localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
});
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") &&
this.$store.replaceState(
Object.assign(
this.$store.state,
JSON.parse(localStorage.getItem("messageStore"))
)
);
} else {
//在页面刷新时将vuex里的信息保存到缓存里
window.addEventListener("beforeunload", () => {
localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
});
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") &&
this.$store.replaceState(
Object.assign(
this.$store.state,
JSON.parse(localStorage.getItem("messageStore"))
)
);
}
},
部分页面缓存
有些组件比如可下拉的列表页面,希望只第一次进入页面时调用接口获取数据,之后每次进入加载缓存数据,提高响应速度减少压力。而不是每次进入都调用接口。
解决方案
router.js:需要缓存的页面在路由载荷中加keepAlive: true。
注:keepAlive的组件会增加两个时间周期钩子,activated和deactivated。
第一次进入钩子顺序:created-mounted-activated
之后进入只有activated钩子
{
name: 'newsList',
component: NewsList,
path: '/Home/NewsList',
meta: {
title: '政策资讯',
index: 1,
allowUnLogin: true,
keepAlive: true
}
},
app.vue中,缓存页面用keep-alive标签包裹的组件显示,不用缓存的用没包裹的组件显示(VUE3.0的写法)
<template >
<router-view v-slot="{ Component }">
<keep-alive>
<component
:is="Component"
:key="$route.path"
v-if="$route.meta.keepAlive"
/>
</keep-alive>
<component
:is="Component"
:key="$route.path"
v-if="!$route.meta.keepAlive"
/>
</router-view>
</template>
开发时接口调用跨域
解决方案
使用devServer进行请求转发
实际接口的地址为:https://xxx.com/xxx/Account/Login
代码中对接口请求的地址:为/api/Account/Login
配置后会检测关键字符串'/api',在前面加上target地址,并将'/api'替换为空字符。
module.exports = {
devServer: {
open: true,
https: false,
//监测关键字进行转发
proxy: {
'/api': {
target: 'https://xxx.com/xxx/',
//target:'http://localhost:4540/',
ws: true,
secure: false, //https
changOrigin: true, //允许跨域
pathRewrite: {
'^/api': '' //把'/api'去除
}
}
}
}
}
发布到服务器后,接口调用跨域
IIS解决方案
安装urlrewrite和Application Request Routing,实现和devServer同效果的转发
参考:
路由守卫
路由载荷中规定该页面是否需要登录才能访问。
router.js:需要登录后访问的页面在路由载荷中加allowUnLogin: true
{
name: 'newsList',
component: NewsList,
path: '/Home/NewsList',
meta: {
title: '政策资讯',
index: 1,
allowUnLogin: true,
keepAlive: true
}
},
前置守卫当前判断登录状态(这里是从VUEX判断)和跳转页面是否要求登录。
//全局路由前置守卫
router.beforeEach((to, from, next) => {
//页面要求登录且用户没登录,跳到登录页
if (!to.meta.allowUnLogin && !store.state.AccessToken) {
next('/Home/Login');
} else {
const title = to.meta && to.meta.title;
if (title) {
document.title = title;
}
next();
}
});
路由懒加载
提高页面加载效率。
将路由组件分割,按需加进行首次加载。之后从缓存获取。
route.js
const NewsList = () => import("./View/Home/NewsList");
{
name: 'newsList',
component: NewsList,
path: '/Home/NewsList',
meta: {
title: '政策资讯',
index: 1,
allowUnLogin: true,
keepAlive: true
}
},