Vue.js 3 实现登录后自动更新 App.vue

最新推荐文章于 2025-03-27 15:27:32 发布

原创

最新推荐文章于 2025-03-27 15:27:32 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #登录

当用户在Vue.js 3应用中成功登录后，通过router.replace更新路由无法同步更新App.vue的导航。为解决此问题，可以利用Vuex的store来存储登录状态，并触发组件更新。具体做法是在store中提交登录状态，进而影响App.vue的显示。

需求

使用vue.js 3 用户登陆之后，router 进行replace更新，但 App.vue 中的导航没有更新。
解决办法，使用vuex 的 store，就是先将这个提交在 store里面，然后进行 this.$store.commit('realoadLogin') 触发更新。

示例

App.vue

# App.vue
<script>
import {
    
    RouterLink, RouterView} from 'vue-router'

export default {
    
    
  computed: {
    
    
    isLogin() {
    
    
      return this.$store.state.authed
    }
  },
  created() {
    
    
    this.$store.commit('login')
  }
}
</script>

<template>
  <div class="container">
    <nav