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同效果的转发

参考：

https://segmentfault.com/a/1190000014483148

路由守卫

路由载荷中规定该页面是否需要登录才能访问。
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
		}
	},