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中生命周期函数的区别
生命周期分为四个对子，根据不同的情况使用不同的函数，这篇文章主要为大家介绍了这些函数的使用与区别，感兴趣的小伙伴可以了解一下
2023-08-08
vue中v-for 循环对象中的属性
这篇文章主要介绍了 vue中v-for 循环对象中的属性，文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助
2021-11-11
element-ui如何防止重复提交的方法步骤
这篇文章主要介绍了element-ui如何防止重复提交的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
vue获取当前路由的五种方式示例代码
这篇文章主要给大家介绍了关于vue获取当前路由的五种方式,文中通过代码示例介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
2023-08-08
vue项目中监听手机物理返回键的实现
这篇文章主要介绍了vue项目中监听手机物理返回键的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-01-01
vite+vue3不清除浏览器缓存直接下载最新代码的解决方案
vite+vue3项目发布后,浏览器上还是旧代码,没有及时更新到最新代码,下面通过本文给大家分享vite+vue3不清除浏览器缓存直接下载最新代码的解决方案,感兴趣的朋友一起看看吧
2024-06-06
浅谈Vue.js应用的四种AJAX请求数据模式
本篇文章主要介绍了浅谈Vue.js应用的四种AJAX请求数据模式，本文将详细介绍在Vue应用程序中实现AJAX的四个方法，有兴趣的可以了解一下
2017-08-08
vue中父子组件注意事项,传值及slot应用技巧
这篇文章主要介绍了vue中父子组件注意事项,传值及slot应用技巧,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-05-05
Vue中的无限加载vue-infinite-loading的方法
本篇文章主要介绍了Vue中的无限加载vue-infinite-loading的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue中$nexttick,$set,$forceupdate的区别
本文主要介绍了vue中$nexttick,$set,$forceupdate的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07