路由切换返回原页面时，如何将侧边栏状态值设为false？

Vue 2/Vue 3 场景 #

方案1：组件内路由守卫 #

如果目标页面是路由组件，可直接在组件内定义路由守卫，进入页面时重置状态：

// Vue 3 <script setup> 示例
import { ref } from 'vue'
const isSidebarOpen = ref(true) // 侧边栏展开状态变量

// 进入当前路由时触发
const beforeRouteEnter = (to, from, next) => {
  next(vm => {
    vm.isSidebarOpen = false
  })
}

// 同路由参数更新时也触发（可选）
const beforeRouteUpdate = (to, from, next) => {
  isSidebarOpen.value = false
  next()
}

方案2：全局路由守卫 #

如果需要批量处理多个页面，可在路由配置中添加全局守卫：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useStore } from 'pinia' // 或vuex，根据你的状态管理工具调整

const router = createRouter({
  history: createWebHistory(),
  routes: [/* 你的路由列表 */]
})

router.beforeEach((to) => {
  const store = useStore()
  // 匹配需要重置状态的页面路由name
  if (to.name === 'YourTargetPage') {
    store.commit('sidebar/setIsOpen', false)
  }
})

export default router

React 场景 #

方案1：监听路由路径变化 #

借助react-router-dom的useLocation钩子，监听路由切换并重置状态：

import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'

function TargetPage() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true)
  const location = useLocation()

  useEffect(() => {
    // 每次进入该页面时将状态设为false
    setIsSidebarOpen(false)
  }, [location.pathname])

  return (
    // 你的页面结构，用isSidebarOpen控制侧边栏展开
  )
}

方案2：组件挂载时重置 #

利用空依赖的useEffect，在组件每次挂载（进入页面）时执行重置：

import { useState, useEffect } from 'react'

function TargetPage() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(true)

  useEffect(() => {
    setIsSidebarOpen(false)
  }, []) // 空数组仅在组件挂载时触发

  return (
    // 你的页面内容
  )
}

内容的提问来源于stack exchange，提问作者emrctnn11