vue3点击哪个路由，就获取哪个路由的名称

最新推荐文章于 2024-07-17 09:21:38 发布

原创最新推荐文章于 2024-07-17 09:21:38 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 同时被 2 个专栏收录

36 篇文章

订阅专栏

项目实战遇到的问题

25 篇文章

订阅专栏

本文介绍了如何在Vue Router中为路由定义meta属性，包括设置页面标题和实现授权控制。通过例子展示了如何在导航组件中显示当前路由的title，并强调了元数据在用户体验和权限控制中的作用。

router上要定义meta

{
        path: '/home',
        name: 'Home',
        component: () => import('@/views/filmprocess/home/Index.vue'),
        meta: {
            title: '用户管理',
            requiresAuth: true
        }
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import('@/views/login/Index.vue'),
        meta: {
            title: '登录'
        }
    },

页面引入route并使用

<template>
 <div class="left-name">
                <span>{{ Route.meta.title }}</span>
            </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
const Route = useRoute();
</script>