vue3中路由跳转对应菜单高亮,在<script setup>中监听路由变化

本文展示了在Vue3中如何根据当前路由动态设置菜单选中状态,通过`useRouter`和`useRoute`来监听和处理路由变化,实现菜单项的高亮。点击菜单时调用`handleClick`函数更新当前选中索引并进行路由跳转。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue3中路由跳转对应菜单高亮


 <ul class="menu-list">
 	<li v-for="(item, index) in menuList" 
 		:key="item.id" :class="{ 'active': curIndex === index }"
         @click="handleClick(index, item.path)">
       {{ item.title }}
    </li>
</ul>

<script  setup>
import { ref, watchEffect } from "vue";
import { useRouter, useRoute } from 'vue-router'

const menuList = [
    { id: '1', title: '首页', path: '/ly/index' },
    { id: '2', title: '新闻', path: '/ly/news' },
    { id: '3', title: '提问', path: '/ly/question' },
]

const curIndex = ref(0)

const router = useRouter()

const handleClick = (index, path) => {
    curIndex.value = index
    router.push(path)
}

const route = useRoute()
watchEffect(() => {
    curIndex.value = menuList.findIndex(item => item.path == route.path)
})

</script>

下方是我微信公众号的二维码,关于react及其他相关知识点会在公众号上面更新,可以扫码关注以下,有什么问题也可以通过公众号跟我留言哦
在这里插入图片描述

``` <template> <lay-layout class="home-class"> <lay-header> <lay-logo class="logo">工单管理系统</lay-logo> <lay-switch v-model="collapse"></lay-switch> <lay-switch v-model="active20"></lay-switch> <lay-dropdown> <lay-button type="text" icon="layui-icon-user"></lay-button> <template #content> <lay-dropdown-menu> <lay-dropdown-menu-item>个人中心</lay-dropdown-menu-item> <lay-dropdown-menu-item divided>退出登录</lay-dropdown-menu-item> </lay-dropdown-menu> </template> </lay-dropdown> </lay-header> <lay-layout class="flex-container"> <!-- 侧边菜单 --> <lay-side> <lay-menu :collapse="collapse" :tree="isTree" :theme="active20 ? &#39;dark&#39; : &#39;light&#39;" :selected-key="selectedKey" :open-keys="openKey" @changeSelectedKey="changeSelectedKey"> <lay-menu-item id="/"> <template #icon> <lay-icon type="layui-icon-home"></lay-icon> </template> <template #title> 首页 </template> </lay-menu-item> <lay-sub-menu id="/processUsage"> <template #icon> <lay-icon type="layui-icon-template"></lay-icon> </template> <template #title> 流程使用 </template> <lay-menu-item id="/apply">工单申请</lay-menu-item> <lay-menu-item id="/draft">草稿箱</lay-menu-item> <lay-menu-item id="/todo">待办事项</lay-menu-item> </lay-sub-menu> <lay-sub-menu title="流程查询" is="queryProcess"> <template #icon> <lay-icon type="layui-icon-search"></lay-icon> </template> <template #title> 流程查询 </template> <lay-menu-item id="/query">工单查询</lay-menu-item> <lay-menu-item id="/my-process">我的发起</lay-menu-item> <lay-menu-item id="/processed">已处理工单</lay-menu-item> </lay-sub-menu> <lay-sub-menu title="系统管理" v-if="isAdmin" id="/system"> <template #icon> <lay-icon type="layui-icon-set"></lay-icon> </template> <template #title> 系统管理 </template> <lay-menu-item id="/permission">权限管理</lay-menu-item> <lay-menu-item id="/workflow">流程配置</lay-menu-item> </lay-sub-menu> </lay-menu> </lay-side> <!-- 主体内容 --> <lay-body style="padding: 20px"> <!-- 面包屑 --> <GlobalBreadcrumb></GlobalBreadcrumb> <router-view /> </lay-body> </lay-layout> </lay-layout> </template> <script setup> import { ref } from &#39;vue&#39;; import GlobalBreadcrumb from &#39;../components/global/GlobalBreadcrumb.vue&#39;; const isAdmin = ref(true); const collapse = ref(false); const active20 = ref(false); const selectedKey = ref("/") const openKey = ref(["/"]) const isTree = ref(true) </script>```lay-menu 加了事件changeSelectedKey,如何实现
03-12
<el-menu ellipsis class="el-menu-popper-demo" mode="horizontal" style="max-width: 1200px" active-text-color="#ffffff" :default-active="activePath" router > <el-menu-item index="index">首页</el-menu-item> <el-menu-item index="2" id="product">产品及解决方案</el-menu-item> <el-sub-menu :popper-offset="0" index="walkInto" @click="handleMenuClick"> <template #title>走进兴龙</template> <el-menu-item index="/walkInto#profile">公司简介</el-menu-item> <el-menu-item index="/walkInto#process">发展历程</el-menu-item> <el-menu-item index="/walkInto#news">新闻资讯</el-menu-item> </el-sub-menu> <el-menu-item index="user">用户服务</el-menu-item> <el-sub-menu :popper-offset="0" index="0"> <template #title>招贤纳士</template> <el-menu-item index="campus">校园招聘</el-menu-item> <el-menu-item index="society">社会招聘</el-menu-item> </el-sub-menu> <el-menu-item index="contact">联系我们</el-menu-item> <el-menu-item index="medium">媒体中心</el-menu-item> </el-menu> <script setup> import { useRouter,useRoute } from &#39;vue-router&#39; import { ref, watch } from &#39;vue&#39;; const route = useRoute(); const activePath = ref("index"); const updateBreadcrumbItems = (route) => { activePath.value = route.name; }; // 监听路由变化 watch( () => route.path, () => { updateBreadcrumbItems(route); } ); const router = useRouter() function goIndex() { router.push({name: &#39;index&#39;}); } const handleMenuClick = () => { router.push(&#39;/walkInto&#39;); }; </script> 这段代码点击el-sub-menu虽然跳转到了walkInto页面但是走进兴龙没有进行高亮显示 其中子菜单的 index="/walkInto#profile" 为锚点设置点击跳转到walkInto页面id为profile处的位置这个不要进行更改 要如何点击el-sub-menu跳转到walkInto页面同时走进兴龙也进行高亮显示
最新发布
03-27
### Vue 3菜单路由配置教程 #### 创建项目结构 为了实现菜单导航和面包屑动态联动的功能,在Vue 3项目中通常会创建如下文件夹结构: - `src/router/index.js`:用于定义应用中的所有路由。 - `src/views/`:放置各个页面组件。 - `src/components/MenuComponent.vue`:自定义菜单组件。 #### 安装依赖库 确保安装了必要的依赖项,如vue-router来管理前端路由以及ant-design-vue提供UI组件[^1]。 ```bash npm install vue-router@next ant-design-vue ``` #### 配置路由规则 编辑`router/index.js`文件设置基础路径模式并导入所需视图组件作为子路由。这里展示了一个简单的例子说明如何关联特定URL到对应的页面显示逻辑: ```javascript // src/router/index.js import { createRouter, createWebHistory } from &#39;vue-router&#39; import HomeView from &#39;../views/HomeView.vue&#39; const routes = [ { path: &#39;/&#39;, name: &#39;home&#39;, component: HomeView, meta: { title: "首页", icon: "" } }, // 更多路由... ] export default createRouter({ history: createWebHistory(), routes }) ``` #### 实现菜单组件 接下来构建一个响应式的侧边栏或顶部导航条目列表,它可以根据当前激活状态改变样式,并且能够监听位置变动事件更新自身选中项. ```html <!-- src/components/MenuComponent.vue --> <template> <a-menu v-model:selectedKeys="selectedKeys"> <a-menu-item :key="item.path" v-for="(item,index) in menuData" @click="handleClick(item)"> {{ item.meta.title }} </a-menu-item> </a-menu> </template> <script setup lang="ts"> import { ref, watchEffect } from &#39;vue&#39;; import { useRoute, useRouter } from &#39;vue-router&#39;; let selectedKeys = ref([]); const route = useRoute(); const router = useRouter(); watchEffect(() => { const matchedRoutes = route.matched.filter(record => record.meta && record.meta.title); if (matchedRoutes.length > 0){ selectedKeys.value = [matchedRoutes[matchedRoutes.length - 1].path]; } }); function handleClick(menuItem:any){ router.push({ path: menuItem.path }); } </script> ``` 此部分实现了基本的菜单渲染机制,通过观察路由变化自动调整高亮选项;点击链接时也会触发相应的跳转行为。 #### 动态生成面包屑 最后一步是在布局模板里加入面包屑控件,利用$route对象获取当前位置信息链表从而构造出完整的层级关系表示法。 ```html <!-- 布局文件 Layout.vue 或 App.vue --> <a-breadcrumb style="margin-bottom: 16px;"> <span v-for="match in $route.matched.slice(1)" :key="match.path">{{ match.meta.title }}</span> </a-breadcrumb> ``` 上述代码片段展示了怎样基于已有的路由元数据快速搭建起直观易懂的位置指示器,帮助用户理解所在的具体位置及其上下文环境。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值