首先應用場景如下：

在main.js里面，引入的是路由的配置文件，如下：

import {router} from '@/router';
app.use(router);

路由配置文件router.js如下：

import { createRouter, createWebHistory } from 'vue-router';
import Page1 from '../views/Page1.vue';
import Page2 from '../views/Page2.vue';const routes = [{path:'/',redirect:'/login',component:()=>('@/views/index'),children:[path:'page',redirect:'/a/b',children:[{},{}] ]},{path: '/page1',name: 'login',component: Page1},{path: '/page2',name: 'Page2',component: Page2}
];const router = createRouter({history: createWebHistory(),routes
});export default router;
router.beforeEach((to,from,next))=>{const token = getToken('token');if(to.name!=='login' && !token){next({name:'login'})}else{next()}
}

引用組件如下：

<template><button @click="handleLogout">退出</button>
</template><script setup>
import {router} from '@/router';
//!!!注意，此時，useRoute是不能用的，因為引入順序的問題。需要先引入下面一行，再引入上面一行。
import { useRoute } from 'vue-router';// 獲取當前路由對象
const route = useRoute();const handleLogout = () => {const currentPath = route.path;switch (currentPath) {case '/page1':// 在 page1 頁面點擊退出按鈕時的操作console.log('在 page1 頁面執行退出操作');// 可以添加具體的退出邏輯，比如清除緩存、跳轉到登錄頁等break;case '/page2':// 在 page2 頁面點擊退出按鈕時的操作console.log('在 page2 頁面執行退出操作');// 可以添加不同的退出邏輯break;default:// 其他頁面的默認退出操作console.log('在其他頁面執行退出操作');break;}
};
</script>

總之注意引入順序，應先引入useRoute再引入router.js。要不然獲取不到本頁路徑。