我想让这个页面每次刷新，都固定刷新出来系统首页组件TT怎么刷新只有导航栏高光

Question

import {
    ShoppingCart,
  Menu as IconMenu,
  Setting,
  EditPen,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

  <el-row class="tac">  
    <el-col>
      <h4 class="mb-2">导航栏</h4>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
      <router-link to="/home/index">
        <el-menu-item index="1">
          <el-icon><icon-menu /></el-icon>
          <span>系统首页</span>
        </el-menu-item>
      </router-link>
        <router-link to="/home/shopcart">
            <el-menu-item index="2">
          <el-icon><EditPen /></el-icon>
          <span>添加宠物信息</span>
        </el-menu-item>
        </router-link>
        <router-link to="/home/order">
            <el-menu-item index="4">
          <el-icon><ShoppingCart /></el-icon>
          <span>疫苗订单</span>
        </el-menu-item>
        </router-link>
      </el-menu>
    </el-col>
    
  </el-row>

代码如上，请问各位，我想让这个页面每次刷新，都固定刷新出来系统首页组件TT怎么刷新只有导航栏高光，没有渲染组件呀

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题理解

你想实现的是，当用户刷新页面时，系统首页组件TT始终保持刷新状态，而导航栏高光效果只在刷新时出现一次。

解决方案

你可以使用以下方法：

1. 使用缓存机制：在页面刷新时，使用缓存机制将组件TT的状态保存下来，刷新后直接从缓存中读取状态。
2. 使用钩子函数：在页面刷新时，使用钩子函数（如 beforeMount 或 mounted）来保存组件TT的状态，刷新后直接从钩子函数中读取状态。
3. 使用 vuex：如果你使用 vuex， 你可以在 vuex 中保存组件TT的状态，刷新后直接从 vuex 中读取状态。

核心代码

// 使用钩子函数
beforeMount() {
  // 保存组件TT的状态
  this.TTState = this.$store.state.TTState;
},
mounted() {
  // 刷新后直接从钩子函数中读取状态
  this.TTState = this.$store.state.TTState;
},
// 或者使用缓存机制
beforeMount() {
  // 保存组件TT的状态
  localStorage.setItem('TTState', JSON.stringify(this.$store.state.TTState));
},
mounted() {
  // 刷新后直接从缓存中读取状态
  this.TTState = JSON.parse(localStorage.getItem('TTState'));
}

注意

上述代码仅为示例，具体实现可能需要根据你的项目结构和需求进行调整。