具有重定向的动态Vue路由

时间:2019-11-16 13:09:55

标签: vue.js routing

我对vue.js完全陌生。我拥有授权表格,并且在连接i18n后(使用了本教程:https://github.com/dobromir-hristov/vue-i18n-starter)我无法正确设置路由器。

在routes.js中,我有:

{
    path: '*',
    redirect (to) {
      return Trans.getUserSupportedLang()
    }
  },
  {
    path:'/:lang',
    component:{template:'<router-view />'},
    beforeEnter: Trans.routeMiddleware,
    children:[
      {
        path:'',
        name:'dashboard',
        component:Home,
        meta: {requiresAuth: true},
      },
      {
        path:'signin',
        name:'signin',
        component:Login,
        meta:{authPage:true}
      },
]
}
router.beforeEach((to, from, next) => {
  if (to.params.lang) {
    Vue.config.lang = to.params.lang
    next()
  } else {
    next('/' + Vue.config.lang)
  }
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters['Login/isLoggedIn']) {
      next({
          path: 'signin',
          params:{lang:to.params.lang}
      })
    }
  }else if(to.matched.some(record => record.meta.authPage)){
    if (store.getters['Login/isLoggedIn']) {
      next({
        path:'',
        params:{lang:to.params.lang}
      });
    }
  }
});

授权后,我将使用以下命令将用户重定向到仪表板:

this.$router.push({
      name:'dashboard', params:{lang:lang}
 });

但是在获得授权后,必须更新一次页面才能使路由器工作。

如何解决?谢谢您的帮助。

0 个答案:

没有答案