vue3 - 40.router.10 - 路由元信息

最新推荐文章于 2024-01-20 22:43:38 发布

啦啦朵朵

最新推荐文章于 2024-01-20 22:43:38 发布

阅读量303

点赞数 1

文章标签：前端 javascript 网络

本文链接：https://blog.csdn.net/qq_34111842/article/details/127844464

版权

在router/index.ts中，通过meta来定义路由元信息，比如：

1.路由权限校验标识
2.路由组件过渡名称
3.路由组件是否持久化（keep-alive）
4.路由页面标题名称

我们想要给每一个页面定义一个页面名称：

例子：

router/index.ts：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

declare module 'vue-router' {
    interface RouteMeta {
        title?:string
    }
}

const routes:Array<RouteRecordRaw> = [
    {
        path:'/',
        component:() => import('../views/login/index.vue'),
        meta:{
            title:"欢迎登录"
            // 还可以定义icon图标，keep-live是否缓存等等
        }
    },
    {
        path:'/index',
        component:() => import('../views/index/index.vue'),
        meta:{
            title:"首页"
        }
    }
]
const router = createRouter({
    history:createWebHistory(),
    routes
})
export default rout