vue项目退出登录,点击登录还是退出登录之前的页面

页面现在用户管理菜单下,点击退出登录

需求是点击登录,还是显示在用户管理菜单下,正常下项目登录进去都是首页。

解决办法:

1.获取当前菜单的路径

2.点击退出登录,携带query参数

import { useRouter, useRoute } from 'vue-router'
let $router = useRouter()
let $route = useRoute()


// 退出登录
const logout = () => {
  //这块需要把用户的信息和token都清除
  // 跳转到首页
  $router.push({ path: '/login', query: { redirect: $route.path } })
}

3.在登录页点击登录判断路径是否有query参数

import { ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
let $route = useRoute()
let $router = useRouter()


const login = async () => {
  await loginForm.value.validate()    //表单校验

  loading.value = true
  try {
    // 这块调取登录接口
    // 判断路径是否带有query参数
    let redirect: any = $route.query.redirect
    console.log($route.query.redirect)
    $router.push({ path: redirect || '/' })
    loading.value = false
    ElNotification({
      type: 'success',
      message: '欢迎回来',
    })
  } catch (error) {
    loading.value = false
    ElNotification({
      type: 'error',
      message: (error as Error).message,
    })
  }
}

猜你喜欢

转载自blog.csdn.net/weixin_50999303/article/details/134824275