一、需求说明
1、A系统与B系统切换跳转，两个系统框架不同。
2、需求1：实现从A系统切换到B系统时，关闭A系统所有页面，跳转B系统链接首页，反过来同理。
3、需求2：点击系统切换按钮时，弹出提示，若取消系统切换，系统切换按钮应还原为本系统。
4、需求3：若从A系统退出登录时，再次登录的话，进入的是A系统首页，反过来同理。
5、项目框架：A系统jQuery框架，B系统vue框架。
二、功能实现
1、系统切换按钮：
A、B系统都要有
// 按钮页面.vue
<el-select size="small" @change="systemChange" v-model="systemId">
<el-option :key="index" label="A系统" value="1" />
<el-option :key="index" label="B系统" value="2" />
</el-select>
2、按钮点击，系统切换跳转事件：
A、B系统都要有
下拉选择：弹出提示警告
【确定】：更新cookie当前系统id、跳转对应系统链接
【取消】：下拉码表还原为当前系统id
// 按钮页面.vue
import { setSystem } from 'system.js' // 引入cookie设置
systemChange() {
this.$confirm(`切换系统后，您当前打开的功能将全部关闭`, '提示', {
type: 'warning',
}).then((rs) => { // 【确定】切换系统
setSystem(this.systemId) // cookie更新为要跳转的系统id
if (this.systemId === '2') { // 根据下拉值选择跳转链接
window.location.href = 'B页面首页地址链接'
} else {
window.location.href = 'A页面首页地址链接'
}
}, () => { // 【取消】切换系统
this.systemId = this.oldSystemId // 将下拉值还原为目前系统id
}).catch(res => {})
},
3、cookie记住当前系统id：目的：下次登录时跳转我当前退出去的系统
// system.js
import VueCookie from 'vue-cookie' // 引入vue的cookie
export const SYSTEM = 'System' // 系统cookie名称
export function getSystem() { // 获取cookie
return VueCookie.get(SYSTEM)
}
export function setSystem(system) { // 设置系统cookie值
return VueCookie.set(SYSTEM, system)
}
export function removeSystem() { // 移除系统cookie
return VueCookie.remove(SYSTEM)
}
4、登录：登录上次退出的系统
// login.vue/js
import { getSystem, setSystem } from 'system.js' // 引入cookie设置
const systemId = getSystem()
if (systemId === '2') {
window.location.href = 'B页面首页地址链接'
} else {
if (!systemId) setSystem('1') // 如果没有获取到名为System的cookie值，则默认跳转A系统，并设置cookie值为'1'
window.location.href = 'A页面首页地址链接'
}
三、踩坑记录
1、cookie设置一直出现重复cookie，导致cookie值一直存储报错，导致再次登录系统时，跳转链接不对。
2、重复原因：第一个cookie是A系统设置，没有path；第二个cookie是B系统设置，唯一区别是有一个path。
3、Cookie属性：名称、值、域（domain）、路径（path）。不同的域、不同的路径下可以存在同样名字的cookie。
4、所以AB系统要设置同一个cookie，就需要名称、domain、path相同，值不同，才能完成cookie的更新，否则就会新增加一个cookie。
《功能：cookie与vue：完成双系统切换（jQuery老系统与vue新系统切换）》jQuery系统的cookie设置才是要了老命哇~
