问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在src\permission.ts文件里怎么改变 导航菜单ElMenu 上的属性值，比如说，改变菜单选中的is-active？

头像头饰
豫则立
    29412374

    使用的框架：vue3,vue-element-plus-admin
    在src\permission.ts文件里怎么改变 导航菜单ElMenu 上的属性值，比如说，改变菜单选中的is-active？

    element-plusvue3
    阅读 217
    avatarAI BotBETA
    要在 `src\permission.ts` 文件中改变 Vue 3 和 vue-element-plus-admin 框架中导航菜单 `ElMenu` 上的属性值（例如，改变菜单选中的 `is-active`），你可以通过 Vue 的响应式状态管理和路由守卫来实现。以下是一个基本步骤和示例代码：

1. **定义响应式状态**：在 `src\store`（或你管理 Vuex/Pinia 状态的目录中）定义一个状态来管理当前激活的菜单项。

2. **修改 `permission.ts` 文件**：在 `permission.ts` 文件中，利用 Vue Router 的导航守卫来更新这个状态。

3. **绑定状态到 `ElMenu`**：在组件中绑定这个状态到 `ElMenu` 的 `default-active` 属性，这个属性决定了哪个菜单项是激活的。

### 示例代码

#### 1. 定义响应式状态（使用 Pinia 作为示例）

在 `src\store\index.ts` 中：

    import { defineStore } from 'pinia';

    export const useMenuStore = defineStore('menu', {
    state: () => ({

    activeMenu: '' // 初始化为空字符串或默认激活的菜单项路径

    }),
    actions: {

    setActiveMenu(path: string) {
  this.activeMenu = path;
}

    }
    });

    
#### 2. 修改 `permission.ts` 文件

在 `src\permission.ts` 中：

    import { createRouter, createWebHistory } from 'vue-router';
    import { useMenuStore } from '@/store'; // 根据你的项目结构调整路径
    import routes from './routes'; // 导入你的路由配置

    const router = createRouter({
    history: createWebHistory(),
    routes,
    });

    router.beforeEach((to, from, next) => {
    const menuStore = useMenuStore();
    menuStore.setActiveMenu(to.path); // 更新当前激活的菜单项
    next();
    });

    export default router;

    
#### 3. 绑定状态到 `ElMenu`

在你的导航组件中（例如 `Navbar.vue`）：

    <template>
    <el-menu

    :default-active="activeMenu"
class="el-menu-vertical-demo"
@select="handleSelect"
    <el-menu-item index="index1">
  <router-link to="/path1">Menu 1</router-link>
</el-menu-item>
<el-menu-item index="index2">
  <router-link to="/path2">Menu 2</router-link>
</el-menu-item>
<!-- 更多菜单项 -->

    </el-menu>
    </template>

    <script lang="ts">
    import { defineComponent, computed } from 'vue';
    import { useMenuStore } from '@/store'; // 根据你的项目结构调整路径

    export default defineComponent({
    setup() {

    const menuStore = useMenuStore();
const activeMenu = computed(() => menuStore.activeMenu);

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

return {
  activeMenu,
  handleSelect,
};

    },
    });
    </script>

    
这样，当路由变化时，`permission.ts` 中的导航守卫会更新 `menuStore` 中的 `activeMenu` 状态，而导航组件则会根据这个状态来设置 `ElMenu` 的 `is-active` 样式。
    2 个回答
    得票最新
    头像头饰
    豫则立
      29412374
      ✓ 已被采纳

      把业务操作方式改为其他的方式了。

      头像头饰
      Seven
        1.2k127

        可以这样子实现：

        1. 引入必要的模块：

          import { ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';

        2. 定义一个响应式变量：

          const router = useRouter();
const route = useRoute();
const activeMenu = ref(route.path);

        3. 在路由守卫中更新激活状态：

          router.beforeEach((to, from, next) => {
  activeMenu.value = to.path;
  next();
});

        4. 在组件中使用这个响应式变量：

          <template>
  <el-menu :default-active="activeMenu">
    <!-- 你的菜单项 -->
  </el-menu>
</template>

<script setup>
import { computed } from 'vue';
import { activeMenu } from '@/permission';

const activeMenu = computed(() => activeMenu.value);
</script>

        这样，当路由变化时，activeMenu 会自动更新为当前的路径，ElMenu 的 is-active 属性保持与当前路由匹配。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏