vue router路由元信息，获取路由记录上配置的自定义信息

徐同保

已于 2024-07-30 14:25:02 修改

阅读量359

点赞数 2

文章标签： vue.js javascript 前端

于 2024-07-30 14:25:01 首次发布

本文链接：https://blog.csdn.net/xutongbao/article/details/140795671

版权

router/index.ts:

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      component: () => import('../views/index/Home.vue'),
    },
    {
      path: '/me/:id',
      component: () => import('../views/me/Index.vue'),
      meta: {
        title: '1',
      },
    },
  ],
})

router.beforeEach((to, from) => {
  return true
})

export default router

me/Index.vue:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()



onMounted(() => {
  console.log('route', route.meta.title)
})
</script>

<template>
  <div>me</div>
</template>