### Vue2
新窗口打开页面时侧边栏未显示的解决方案
在 Vue2 项目中，当通过 `_blank`
打开新窗口时，默认情况下不会加载全局状态管理中的数据（如 Vuex 中的状态），因此可能导致侧边栏无法正常显示。以下是几种可能的解决方案：
#### 方案一：通过 `localStorage` 或 `sessionStorage` 同步侧边栏状态
可以利用浏览器存储机制来同步侧边栏的状态信息。具体做法是在主应用中设置一个标志位表示当前用户的权限或菜单配置，并将其保存到 `localStorage` 或 `sessionStorage` 中。
```
javascript
// 主应用中，在路由守卫或其他初始化逻辑处执行
const menuData = [
{ title: &#
39;首页&#
39;, path: &#
39;/&#
39; },
{ title: &#
39;可视化大屏&#
39;, path: &#
39;/Visualization&#
39; }
];
localStorage.setItem(&#
39;menuData&#
39;, JSON.stringify(menuData));
```
在新开页面中读取这些数据并渲染侧边栏：
```
javascript
export default {
data() {
return {
menus: []
};
},
created() {
const storedMenus = localStorage.getItem(&#
39;menuData&#
39;);
if (storedMenus) {
this.menus = JSON.parse(storedMenus);
}
}
};
```
此方法适用于简单的场景，但需要注意清理过期的数据[^1]。
---
#### 方案二：传递参数至
新窗口并通过 URL 获取
可以在跳转链接中附加必要的参数，用于描述侧边栏的
内容或用户权限等信息。例如：
```html
<a :href="&#
39;/new
-page?menus=&#
39; + encodeURIComponent(JSON.stringify(menus))" target="_blank">
打开新窗口</a>
```
在目标页面解析 URL 参数并恢复侧边栏
内容：
```
javascript
created() {
const urlParams = new URLSearchParams(window.location.search);
const menusParam = urlParams.get(&#
39;menus&#
39;);
if (menusParam) {
try {
this.menus = JSON.parse(decodeURIComponent(menusParam));
} catch (e) {}
}
}
```
这种方法更加灵活，适合跨域或多页应用之间的通信需求[^1]。
---
#### 方案三：引入独立的侧边栏模块
如果多个页面都需要共享相同的侧边栏功能，则建议提取成单独的组件或服务文件。这样无论在哪一页都可以方便地调用它而无需重复定义逻辑。
创建通用侧边栏组件 `Sidebar.vue` 并封装其
行为逻辑；随后只需在各子页面中注册该组件即可完成展示工作。
```vue
<template>
<div class="sidebar">
<ul v
-for="(item, index) in menus" :key="index">
<li>{{ item.title }}</li>
</ul>
</div>
</template>
<script>
import { mapState } from &#
39;vuex&#
39;;
export default {
computed: {
...mapState([&#
39;menus&#
39;])
}
};
</script>
```
注意此时需确保 Vuex store 的初始状态已正确填充[^
3]。
---
#### 方案四：借助第三方库增强交互能力
对于更复杂的业务需求，比如动态调整宽度或者支持
拖拽操作等功能，可以选择集成一些成熟的插件工具辅助开发过程。例如 **Vue2
-Slideout
-Panel** 提供了一个易于使用的 API 来构建堆叠式的抽屉效果[^2] ，能够很好地满足定制化要求的同时减少自行编码的工作量。
另外还有专门针对 Element UI 设计的一系列扩展包可供选用，它们往往已经内置了许多实用特性可以直接拿来即用[^
3]。
---
以上四种方式各有优劣，请根据实际情况选取最适合的一种实施改进措施。
本文介绍了如何使用JavaScript阻止浏览器默认的拖放行为，包括ondragover、ondrop及ondragstart事件的处理。
扫一扫
1716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
