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

初遇你时动了情2024-04-03 16:19

/ 表示默认现实的根据目录,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"
                       ...
                        >