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实现天气预报小应用，查询一些城市的天气情况，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。有需要的小伙伴可以参考下2016-08-08
这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了vue 在methods中调用mounted的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue实现动态按钮功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了vue实现折线图，可按时间查询，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了Vue SSR 即时编译技术的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了vue data中如何获取使用store中的变量，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了VeeValidate在vue项目里表单校验应用案例，VeeValidate是Vue.js的验证库，它有很多验证规则，并支持自定义规则，非常具有实用价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了Vue 组件参数校验与非props特性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论