如何使用 Vue Router 的 meta 属性实现多种功能

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/Home'),
        meta: {
            title: 'Home Page'
        }
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/views/About'),
        meta: {
            title: 'About Us'
        }
    }
];
router.beforeEach((to, from, next) => {
    if (to.meta.title) {
        document.title = to.meta.title;
    }
    next();
});

const routes = [
    {
        path: '/admin',
        name: 'Admin',
        component: () => import('@/views/Admin'),
        meta: {
            requiresAuth: true,
            roles: ['admin']
        }
    },
    {
        path: '/user',
        name: 'User',
        component: () => import('@/views/User'),
        meta: {
            requiresAuth: true,
            roles: ['user', 'admin']
        }
    }
];
function getUserRole() {
    return localStorage.getItem('userRole');
}
router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        const userRole = getUserRole();
        if (!userRole) {
            next({ path: '/login' });
        } else if (to.meta.roles && to.meta.roles.indexOf(userRole) === -1) {
            next({ path: '/unauthorized' });
        } else {
            next();
        }
    } else {
        next();
    }
});

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/Home'),
        meta: {
            transition: 'slide-left'
        }
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/views/About'),
        meta: {
            transition: 'fade'
        }
    }
];
// 在主组件中使用<transition>，例如App.vue
<template>
    <div id="app">
        <transition :name="$route.meta.transition">
            <router-view></router-view>
        </transition>
    </div>
</template>

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/Home'),
        meta: {
            keepAlive: true
        }
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/views/About'),
        meta: {
            keepAlive: false
        }
    }
];
// 在主组件中使用<keep-alive>
<template>
    <div id="app">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/Home'),
        meta: {
            showLoading: true
        }
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/views/About'),
        meta: {
            showLoading: false
        }
    }
];
router.beforeEach((to, from, next) => {
    if (to.meta.showLoading) {
        // 显示加载指示器
        showLoadingIndicator();
    }
    next();
});
router.afterEach(() => {
    // 隐藏加载指示器
    hideLoadingIndicator();
});

const routes = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/Home'),
        meta: {
            animation: 'slide-left'
        }
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('@/views/About'),
        meta: {
            animation: 'slide-right'
        }
    }
];
// 在App.vue中使用<transition>标签
<template>
    <div id="app">
        <transition :name="$route.meta.animation">
            <router-view></router-view>
        </transition>
    </div>
</template>