Vue Router Navigation Guard 动态导入

Question

我想动态地将数据从组件文件导入到路由器文件，并根据导入数据的值允许next() 。

在App.vue中，我触发this.$router.push({name: "Dashboard"})当数据经过authenticated: false更改为true 。 我用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并从router文件中删除身份验证登录：

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