Vue3中url传递参数通过全局前置守卫接收参数，利用store存储并控制DOM显示或隐藏（记录一个困扰了自己的一个Bug）

业务场景： 根据路由传递的标志eg: hidden来控制侧边栏和横条显示或隐藏
核心代码：

    <a-layout-header class="header" v-if="!(parseInt(hidden) === 1 ? true : false)">
      <layout-header/>
    </a-layout-header>

主要业务代码

Vuex(Store)中设置hidden存储控制标志位

const user = {
	namespaced: true,
	state: {
		// 用户信息
		userInfo: {},
		// 添加投票基础信息 第一步
		subjects: {},
		// 添加投票题目 第二步
		topic: [],
		// 0是显示 1是隐藏
		hidden: 0,
	},
	mutations: {
		// 设置侧边栏和横条
		setHidden(state, data) {
			console.log('state.hidden', state.hidden)
			state.hidden = data;
		},
}

路由全局守卫存储标志

import {permission} from './permission'
import {constantRoutesMap} from './router'
import {createRouter, createWebHashHistory} from 'vue-router'
// 在route.js中引入就好了
import store from "@/store/index";
 
// 实例化路由
const router = createRouter({
    // history: createWebHashHistory('/syfb/'),
    history: createWebHashHistory(''),
    routes: constantRoutesMap
})
 
router.beforeEach(function (to, from, next) {
    // true 显示侧边栏和横条
    // false 隐藏侧边栏和横条
    let hidden = to.query.hidden;
    if (!(parseInt(store.state.user.hidden) === 1)) {
        store.commit("user/setHidden", hidden);
    }
    next()
})
 
permission(router)
 
export default router
 

使用隐藏或显示标志位

    const store = useStore()
    const collapsed = ref(false)
    const route = useRoute();
    // 1 开启，0关闭
    const hidden = ref(1);
    hidden.value = store.state.user.hidden;
    if (hidden.value === undefined || hidden.value === '') {
      hidden.value = 3;
    }