vue3+element plus中利用el-menu如何实现路由跳转

更新时间：2023年12月08日 11:00:12 作者：erdongji

这篇文章主要给大家介绍了关于vue3+element plus中利用el-menu如何实现路由跳转的相关资料,在Vue Router中我们可以使用el-menu组件来实现菜单导航,通过点击菜单项来跳转到不同的路由页面,需要的朋友可以参考下

利用el-menu如何实现路由跳转

附：vue3路由匹配和使用elementPlus路由跳转

使用el-menu路由不调转

        <el-menu active-text-color="#ffd04b"
                 background-color="#545c64"
                 text-color="#fff"
                 class="el-menu-verticaldemo layout-menu"
                 :collapse="isCollapse"
                 @open="handleOpen"
                 router
        ></el-menu>

需要在 el-menu 中添加 router
配置el-menu-item 上的 route 跳转路径和 index 然后路由正常跳转

 <el-menu-item :route="{name:c.path}" 
    :index="c.path"> {{c.meta.title}}
</el-menu-item>

在某个页面输入不存在的路径页面跳转

配置404页面在匹配不到路由的时候跳转到404

跳转到首页

  router.beforeEach(async (to, from, next) => {
 		if (to.matched.length === 0) {  //如果未匹配到路由
 		//如果上级也未匹配    到路由则跳转登录页面，如果上级能匹配到则转上级路由
 		   from.name ? next({name: from.name}) : next('/');   
 		} else {
 		       next();    //如果匹配到正确跳转
 		}
  })

页面在刷新的时候没有停留在当前页面返回了首页

匹配 * 一定要写在所有路由最后

{path: '/:pathMatch(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面

总结

到此这篇关于vue3+element plus中利用el-menu如何实现路由跳转的文章就介绍到这了,更多相关el-menu实现路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue如何获取自定义元素属性参数值的方法
这篇文章主要介绍了vue如何获取自定义元素属性参数值的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue+elementUI中使用Echarts之饼图问题
这篇文章主要介绍了vue+elementUI中使用Echarts之饼图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue的条件判断问题及说明
文章主要介绍了Vue中的v-if、v-else-if和v-else的等这三种指令的使用方法和场景,还对比了v-if和v-show的区别,并提供了实际开发中选择v-if或v-show的的建议
2026-05-05
Vue3 中 watch的 flush 选项(默认无/`post`/`sync`
文章介绍了Vue3中watch的flush选项,解释了三种模式（默认pre、post、sync）的工作机制和适用场景,并提供了代码示例进行对比,强调了在90%的场景下选择post模式以确保操作DOM的正确性,感兴趣的朋友跟随小编一起看看吧
2026-03-03
关于element-ui resetFields重置方法无效问题及解决
这篇文章主要介绍了关于element-ui resetFields重置方法无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue组合式API如何正确解构props不会丢失响应性
响应式 API 赋予了组合式 API 一大坨可能性的同时,代码精简,虽然但是,我们应该意识到响应性的某些陷阱,比如丢失响应性,在本文中,我们将学习如何正确解构 Vue 组件的 props,使得 props 不会丢失响应性
2024-01-01
vue使用微信JS-SDK实现分享功能
这篇文章主要介绍了vue使用微信JS-SDK实现分享功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
vuecli项目构建SSR服务端渲染的实现
这篇文章主要介绍了vuecli项目构建SSR服务端渲染的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
Vue input输入框中的值如何变成黑点问题
这篇文章主要介绍了Vue input输入框中的值如何变成黑点问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
详解vuex之store源码简单解析
这篇文章主要介绍了详解vuex之store源码简单解析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06