Bootstrap

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 导航无法选中(同级页面跳转,导航无法高亮)

;