医疗网站建设中心_app定制开发网络公司_十大营销手段_微商营销技巧

首先应用场景如下：

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