【vue3如何实时显示当前页面名称】

• 问题：当我想做一个实时的面包屑时，如果根据根据路由的跳转而更新面包屑
• 技术：pinia+vue-router

1.        使用pinia创建一个共用状态：navTitle

//  /store/setting.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const settingStore = defineStore('setting', () => {
  //存储navTitle
  const navTitle :any= ref('')
  //用于匹配
  const titleMap: any = {
    Home: "主页",
    home: "主页",
    "data-login": "登录",
    "data-error": "错误页面",
    "data-404": "404页面",
    "data-500": "500页面",
  };
  const setNavTitle= (routeName: string) => {
    navTitle.value = titleMap[routeName] || "未知页面";
  }
  return { navTitle, setNavTitle }
}, {
  persist: true
})

2.        确保main.ts中注册pinia

import { createApp } from "vue";
const pinia = createPinia()
const app = createApp(App);
app.use(pinia)
app.mount("#app");

3.         使用路由导航守卫进行监听路由变化

// /router/index.ts
import {createRouter, createWebHistory} from 'vue-router'
import { settingStore } from '@/store/setting

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      redirect: '/home',
      component: () => import('@/components/layouts/LayoutView.vue'),
      children: [
        {
          path: '/home',
          name: 'home',
          component: () => import('@/views/HomeView/index.vue')  
        },
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/LoginView/index.vue')
    },
    
  ]
})
router.beforeEach((to:any, from, next) => {
  if (to.name !== 'Login') {
    //设置navTitle的值
    const navTitle = settingStore();
    navTitle.setNavTitle(to.name);
    console.log(to.name);
  }
  next();
})
export default router

4.        页面使用

// vue页面
<template>
    <span class="text-14px font-bold">
      {{ navTitle }}
    </span>
</template>
<script setup lang="ts">
    import { settingStore } from "@/store/setting";
    import { computed } from "vue";
    const navTitleStore = settingStore();
    let navTitle = computed(() => navTitleStore.navTitle);
</script>