Почему не работает $router.addRoutes?

113

22 декабря 2020, 21:20

Ситуация такая, при инициализации в объекте route три объекта маршрутов:

var routes = [
{ name: 'a', path: '/', component: Start },
{ name: 'b', path: '/signup', component: SignUp, alias: '/sign' }
{ name: 'd', path: '*', component: NotFound }]

При успешной авторизации пользователя в приложении ему должен быть доступен его личный кабинет по адресу: '/user'. Реализуется это путем добавления к объекту router нового объекта маршрута:

this.$router.addRoutes([{ name: 'c', path: '/user', component: User }]);

Но при попытке перехода по данному маршруту меня терпит неудача(( а именно редирект на маршрут 'd':

Как быть собстна, Господа?)

Vue.use(Router) 
var routes = [ 
    { name: 'a', path: '/', component: Start }, 
    { name: 'b', path: '/signup', component: SignUp, alias: '/sign' }, 
    { name: 'd', path: '*', component: NotFound } 
] 
 
var router = new Router({ 
    mode: 'history', 
    routes: routes 
}) 
 
  export default { 
    name: 'app', 
    router: router, 
    data: function() {  
      return { 
        message: 'Hello' 
      } 
    }, 
    methods: { 
      addNewUrl: function(mes) { 
        this.$router.addRoutes([{ name: 'c', path: '/user', component: User }]); 
        console.log(this.$router);  // получаю все те же самые три маршрута 'a', 'b', 'd' 
    }, 
    }

P.S. при вызове метода push "не отходя от кассы" переход успешен, но увы, при возврате к стартовой странице '/' или регистрации '/signup' повторный переход к '/user' невозможен(((

this.$router.addRoutes([{ name: 'c', path: '/user', component: User }]);
this.$router.push('/user');

Answer 1

Не надо так делать. Надо объявить СРАЗУ все маршруты, но проверять статус пользователя, что он вошёл в систему.

Файл router.js

import store from '../store';
Vue.use(Router);
const ifNotAuthenticated = (to, from, next) => {
  if (!store.getters.isAuthenticated) {
    next();
    return;
  }
  next('/');
};
const ifAuthenticated = (to, from, next) => {
  if (store.getters.isAuthenticated) {
    next();
    return;
  }
  next('/login');
};
export default new Router({
  routes: [
    {
      path: '/',
      name: 'DashboardMain',
      component: DashboardMain,
      beforeEnter: ifNotAuthenticated,
    },
    {
      path: '/Login',
      name: 'Login',
      component: Login,
      beforeEnter: ifNotAuthenticated,
    },
    {
      path: '/Accounts/All',
      name: 'AccountsAll',
      component: AccountsAll,
      beforeEnter: ifAuthenticated,
    },
  ],
});

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как реализовать такой же эффект?

Подскажите пожалуйста, как реализовать такой же эффект у текста, как на этом сайте: https://wwwsquarespace

127

javascript

Переменная не очищается

В subels пункты li накапливаются с каждой итерацией и не отчищаются при объявлении, а если очищать с помощью subelsempty(), то они в итоге все удаляются

114

javascript

Проверка авторизации React JS

Делаю приложение на react js Есть авторизация и доступ к сайту после нееСделал проверку авторизовался пользователь или нет при отрисовке дефолтного...

198

c++

Строки в С/С++, удаление элементов

Задача: Есть массив char text[20][81], в нем записаны строки, необходимо найти и удалить содержимое правильно расставленных скобок, включая сами...

125