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>

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

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

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

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

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

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

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

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

vue3 element plus NavMenu 导航无法选中（同级页面跳转，导航无法高亮）