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"
                       ...
                        >
相关推荐
你挚爱的强哥15 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
天天进步20153 小时前
Vue+Springboot用Websocket实现协同编辑
vue.js·spring boot·websocket
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript