Vue Router Navigation Guard 动态导入

Question

我想将 data 从 component 文件 动态导入 router 文件 并根据导入 data 的值允许 next() .

在 App.vue 中，当 data authenticated: false 更改为 true 时，我正在触发 this.$router.push({name: "Dashboard"})。我用watch 触发它。

问题是，路由器文件总是会收到原始值false，即使是动态导入。

---

App.vue

watch: {
      authenticated(){
         console.log(this.authenticated)             //Outputs 'true'
         this.$router.push({name: 'Dashboard'});     //Triggers routing
      }
   }

---

路由器文件 (index.js)

{
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      beforeEnter(to, from, next){
         (async ()=>{
            const mod = await import('../view/App.vue');  //Dynamic import
            let result = mod.default.data().auth;         //Access 'authenticated' value from App.vue
            console.log(result);                          //Output is 'false', but it should be 'true'
            result ? next() : next({name: 'Login'});
         })()
      }
}

---

我也尝试了许多不同的async 方法，但没有任何效果。

Answer 1

在App.vue 中使用In-Component Guard 指定here 并从router 文件中删除身份验证登录：

beforeRouteLeave(to, from, next) {
    if (to.name === 'Dashboard' && this.authenticated) {
        next();
    }
    else {
        next({ name: 'Login' });
    }
}