vue router+ vuex+ логика оценки входа на домашнюю страницу

внешний интерфейс Vue.js Vuex

Логика входа на главную страницу требует определить, получен ли токен входа на странице, и перейти на страницу входа, если он не получен. После успешного входа перейдите на предыдущую страницу.

1.vue router

Решение о маршрутизации Первое, о чем мы думаем, это router.beforeEach pre-navigation guard. Этот метод принимает три параметра from next . Параметр to — это путь маршрутизации, через который следует перейти, from — это маршрут, с которого собирается покинуть текущая навигация, а метод next используется для устранения ловушки. Ниже приведен пример судебного решения, написанного на работе:

router.beforeEach(async (to, from, next) => {
  const { name, meta } = to;
  const { requireLogin } = meta;
  if (name === 'login') {  // 如果是登录页则用next方法resolve掉这个钩子，如果不是，进行到下一个判断
    return next();   
  }
  const needLogin = requireLogin && !store.getters.user.isLogin;  // 从store中读取是否获取了已登录的信息
  if (needLogin) {
    return next({   //  如果没有则跳转到登录页，将当前路由路径放到参数中
      name: 'login',
      params: { back: to },
    });
  }
  return next();  
});

2. this.$router 与 this.$route   this.$router.push 与 this.$router.replace

После того, как страница входа завершит запрос на вход, выполните следующие действия. Получить параметры предыдущего пути в пути, а затем перейти на страницу

 loginSuccess() {
      const { params: { back } } = this.$route;
      const route = back || { name: 'home' };
      const { name, params, query } = route;
      this.$router.replace({ name, params, query });
    },

Есть две концепции, которые мы часто путаем в приведенном выше коде:

мы знаемthis.$routerЭкземпляр маршрутизатора, который можно использовать для прямого доступа к маршрутам. Мы называем каждый объект в конфигурации маршрутизатора записью маршрутизации,this.$routeпредоставляется для доступа к каждой записи маршрута. Таким образом, мы получаем параметры, используяthis.$routeМаршрут используется при переходе по маршрутуthis.$router.

В коде верхнего уровня мы используем замену вместо нажатия для перехода по маршруту Разница между ними заключается в том, будет ли генерироваться запись в истории. replace не добавляет новую запись, а напрямую заменяет запись маршрутизации.

Категории