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

在In-Component Guard中按指定的here使用App.vue，然后从router文件中删除身份验证登录名：

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

Vue路由器Navigation Guard动态导入

1 个答案: