vue3中，route4，获取当前页面路由的问题

首先应用场景如下：

在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。要不然获取不到本页路径。