vue3+element plus中利用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实现路由跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！