vue3 ts路由配置,自动显示首页指定页面,element push根据地址栏显示对应的菜单

/ 表示默认现实的根据目录,redirect表示路由重定向 admin/dashboard,浏览器输入www.baidu.com的时候默认会跳转到重定向页面

{
    path: "/",
    component: Layout,
    // 写法一
        // redirect: "/shop"
        // 写法二
    redirect: (to => { return { path: `admin/dashboard` } }),
    children:[{
      path: `admin/dashboard`,
      name: "home", 
      component: () => import("@/views/home/index.vue"),
      meta:{title:"首页11",icon: 'icon-huahua_taiyangnengguangfu'}
    },]
},

404页面

{
  path: '/404',
  component: () => import('@/views/404/index.vue')
},
{
      path: '/:pathMatch(.*)', //路由不存在的时候,自动跳转到404
      redirect: '/404'
}

element push浏览器输入路由,导航菜单的默认选中

import { useRouter,RouteRecordRaw,useRoute } from 'vue-router'
const useRoute1=useRoute()
const activeMenu=computed(()=>{
    // const route:any=routerData
    const { meta, path } = useRoute1
    if ("activeMenu" in meta) {
        return meta.activeMenu
      }
      return path
    
})

default-active使用上面的activeMenu就可以

<el-menu
                        :default-active="activeMenu"
                       ...
                        >
相关推荐
凉辰39 分钟前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf1 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨1 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL1 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1112 小时前
css实现div被图片撑开
前端·css
薛一半2 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾2 小时前
CSS综合练习——懒羊羊网页设计
前端·css
过期的H2O23 小时前
【H2O2|全栈】JS进阶知识(四)Ajax
开发语言·javascript·ajax
MarcoPage3 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
.net开发3 小时前
WPF怎么通过RestSharp向后端发请求
前端·c#·.net·wpf