Vue 3组合式api 如何调用router

最新推荐文章于 2024-08-22 13:36:33 发布

~，555555

最新推荐文章于 2024-08-22 13:36:33 发布

阅读量1.6k

点赞数 1

分类专栏：前端学习文章标签： vue router Vue3 router4

本文链接：https://blog.csdn.net/weixin_44717047/article/details/119805417

版权

前端学习专栏收录该内容

84 篇文章 3 订阅

订阅专栏

本文介绍了在Vue组件的setup选项中如何正确使用路由器。由于在setup中this是undefined，不能直接通过this.$router来调用路由。解决办法是引入useRouter钩子函数，通过它获取到router实例，然后在logout函数中实现页面跳转。同时，清空了sessionStorage中的token，确保用户登出操作的完整流程。

摘要由CSDN通过智能技术生成

我想要在setup里面调用router，但是setup里面的this是undefined，因此就不能直接this.$router.push('/logout')。

但是还好 vue router 的官网写了解决方案：点击查看。

import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();

    function logout() {
      // 清空token
      window.sessionStorage.removeItem("token");
      // 重新导航到登录页
      router.push('/login');
    }

    return {logout};
  },
};