vue3 退出登录无感刷新页面

要实现无感刷新页面的退出登录，可以使用路由守卫和localStorage来实现。下面是一个基本的实现思路：

1. 在用户退出登录时，清空localStorage中的用户信息，并重定向到登录页面。

2. 在路由配置中使用beforeEach路由守卫，检查用户是否已登录。

3. 如果用户未登录，则重定向到登录页面；如果用户已登录，则继续访问目标路由。

4. 当用户访问需要登录才能访问的路由时，路由守卫会检查localStorage中是否存在用户信息，如果存在则允许访问，否则重定向到登录页面。

下面是一个示例代码：

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

// router/index.js

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true } // 需要登录才能访问
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 路由守卫
router.beforeEach((to, from, next) => {
  // 检查用户是否已登录
  const isAuthenticated = localStorage.getItem('user') !== null

  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要登录才能访问的路由
    if (!isAuthenticated) {
      // 未登录，重定向到登录页面
      next('/login')
    } else {
      // 已登录，继续访问目标路由
      next()
    }
  } else {
    // 不需要登录即可访问的路由，直接访问
    next()
  }
})

export default router

// components/Logout.vue

export default {
  methods: {
    logout () {
      // 清空localStorage中的用户信息
      localStorage.removeItem('user')

      // 重定向到登录页面
      this.$router.push('/login')
    }
  }
}

在这个示例中，我们通过localStorage来保存用户信息，如果用户已登录，则localStorage中会存在'user'这个键。在需要登录才能访问的路由中，我们使用beforeEach路由守卫来检查用户是否已登录，如果未登录，则重定向到登录页面。当用户退出登录时，我们清空localStorage中的'user'键，并重定向到登录页面。这样，用户退出登录后，再次访问需要登录才能访问的路由时，路由守卫会检查到localStorage中不存在'user'键，从而重定向到登录页面，实现了无感刷新页面的退出登录。