Как получить маршрут Param

Question

Это как мой маршрутизатор выглядит следующим образом:

export default new VueRouter({ 
    mode: 'history', 
    routes: [ 

     /** 
     * Authentication 
     */ 

     { name: 'login', 
      path: '/', 
      component: Login, 
      guest: true 
     }, 

     { name: 'registration', 
      path: '/registreer', 
      component: Registration, 
      guest: true 
     }, 

     /** 
     * Forum 
     */ 

     { name: 'forum', 
      path: '/forum', 
      component: Forum, 
      auth: true 
     }, 
    ] 
}); 

Теперь я хотел бы получить значение auth, когда я иду в /forum. Как получить эту ценность? Я ничего не могу найти в the docs.

Уже попытался это:

router.beforeEach((to, from, next) => { 
    console.log(to.auth); 
    next() 
}); 

Но ничего показать, только undefined.

Любые идеи?

Answer 1

Это хороший случай использования для Vuex - https://vuex.vuejs.org/en/intro.html

Vuex позволяет сохранить состояние приложения, а также хранить различные ответы API, так что вам не нужно чтобы перезагрузить те же данные в других компонентах.

В вашем конкретном случае, ваш forum компонент может проверить состояние Vuex если auth доступен (это может быть сделано в created или mounted обработчика). Если auth нет в наличии, то вы должны немедленно повторно маршрут авторизовать страницы с помощью this.$router.replace("/login")

В вашем auth компонента или login компонента, вы можете сделать проверку подлинности в обычном режиме. После успешного входа в систему вы можете сохранить ответ сервера в this.$store.state["auth"] - состоянии Vuex, доступном по всему миру для всех компонентов. Это может быть сделано следующим образом (как мутации в Vuex магазине):

Vue.set(state, "auth", currentUserDetailsObject) 

После этого, вы можете перенаправить forum компонент, где auth доступен в this.$store.state и поэтому форум может продолжить, чтобы отобразить компонент нормально.

Возможно, вам потребуется некоторое время нарастания, чтобы привыкнуть к понятиям actions и mutations, но вы найдете его очень полезным для остальной части вашего приложения, как только привыкнете к нему.

Answer 2

• Я думаю, вы могли бы найти то, что хотите here.
• И вы, вероятно, хотите узнать о Vuex.

• Тогда вы можете написать такой код.

  if (!store.getters.auth) { 
      next({ 
       path: '/login', 
       query: {redirect: to.fullPath} 
      }) 
  }