Vue-Router 第十一节：路由元信息

我们称呼 routes 配置中的每个路由对象为 路由记录，我们可以通过路由记录的 meta 属性来定义路由的元信息。它可以在路由对象和导航守卫上都被访问到。

使用路由元信息我们可以 ：权限校验标识、路由组件的过渡名称、路由组件持久化缓存 (keep-alive) 的相关配置、标题名称.

1、路由元信息案例

示例一：标题名称

// router/index.ts
import About from '@/views/about/index.vue'
import path from 'path';
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
    // 可直接导入或者引入
    {
        path: '/',
        component: () => import("@/views/login/index.vue"),
        meta: {
            title: '登陆',
            isJump: true
        }
    },
    {
        path: '/home',
        component: () => import("@/views/home/index.vue"),
        meta: {
            title: '首页',
            isJump: false
        }
    }
]
​
​
// 2、创建路由实例并传递routes
​
const router = createRouter({
    history: createWebHistory(),
    routes
})
​
const whileList = ['/']
router.beforeEach((to, form, next) => {
    if (whileList.includes(to.path) || localStorage.getItem('token')) {
        next()
    } else {
        next('/')
    }
})
​
// 导出
export default router
​

// home/index.vue
<template>
    <div>
        <H1>
            我是Home页面-----{{ $route.meta.title }}     
        </H1>
    </div>
</template>
​
<script setup lang="ts">
import { ref } from 'vue'
</script>
​
<style></style>

示例二：权限校验标识

// router/index.ts
import About from '@/views/about/index.vue'
import path from 'path';
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
    // 可直接导入或者引入
    {
        path: '/',
        component: () => import("@/views/login/index.vue"),
        meta: {
            title: '登陆',
            isJump: true
        }
    },
    {
        path: '/home',
        component: () => import("@/views/home/index.vue"),
        meta: {
            title: '首页',
            isJump: false
        }
    }
]
​
​
// 2、创建路由实例并传递routes
​
const router = createRouter({
    history: createWebHistory(),
    routes
})
​
const whileList = ['/']
router.beforeEach((to, form, next) => {    
// ******************看这里 在导航守卫中使用路由元信息**********************
    if ((whileList.includes(to.path) || localStorage.getItem('token')) && to.meta.isJump) { 
        next()
    } else {
        next('/')
    }
})
​
// 导出
export default router
​

2、使用TS扩展

可以继承来自 vue-router 中的 RouteMeta 来为 meta 字段添加类型：

import About from '@/views/about/index.vue'
import path from 'path';
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
interface RouteMeta {           //************使用ts为meta定义类型
    title:string,
    isJump: boolean
}
const routes: Array<RouteRecordRaw> = [
    // 可直接导入或者引入
    {
        path: '/',
        component: () => import("@/views/login/index.vue"),
        meta:<RouteMeta>({
            title: '登陆',
            isJump: true
        })
    },
    {
        path: '/home',
        component: () => import("@/views/home/index.vue"),
        meta:<RouteMeta>({
            title: '首页',
            isJump: false
        }) 
    }
]
​
​
// 2、创建路由实例并传递routes
const router = createRouter({
    history: createWebHistory(),
    routes
})
​
const whileList = ['/']
router.beforeEach((to, form, next) => {
debugger
    if ((whileList.includes(to.path) || localStorage.getItem('token')) && to.meta.isJump) {
        next()
    } else {
        next('/')
    }
})
​
// 导出
export default router