Установить активный класс в Vue router-link, когда необязательный параметр в родительском маршруте - PullRequest
Новая
       5

Установить активный класс в Vue router-link, когда необязательный параметр в родительском маршруте

2 голосов
/ 28 января 2020

У меня есть необязательный параметр lang в начале всех моих маршрутов, например /:lang?/foo.

Когда я использую маршрут foo в router-link, передавая параметр lang, он соответствует и правильно добавляет класс .router-link-active в <a/>.

Однако во многих местах моего проекта я не передавал никаких параметров в router-link и в глобальном маршрутизаторе для навигации beforeEach I устанавливаю параметр lang, если никто не пропущен. В этом случае router-link не добавит активный класс, так как он не соответствует маршруту, потому что отсутствует пропущенный параметр в to prop.

Как я могу игнорировать соответствующие логи c этот необязательный параметр для всех маршрутов, поэтому у меня добавлены классы .router-link-active и .router-link-exact-active?

Вот jsfiddle Я играл там, где я хочу, чтобы первая ссылка была красной.

Ниже приведены соответствующие части: 

  <router-link :to="{name: 'foo'}">/foo</router-link>
  <router-link :to="{name: 'foo', params: {lang: 'en'}}">/en/foo</router-link>

routes: [
  {
    path: '/:lang?',
    component: {
      render(c) {
        return c('router-view');
      },
    },
    children: [
      {
        name: 'foo',
        path: 'foo',
        component: Foo
      }
    ]
  }
]

router.beforeEach((to, from, next) => {
  if (!to.params.lang) {
    const route = { ...to };
    route.params = { ...route.params, lang: 'en'};
    next(route);
  } else {
    next();
  }
});

1 Ответ

2 голосов
/ 28 января 2020

Я получил его, переопределив метод vue router resolve по умолчанию, поскольку он также используется в router-link для поиска маршрутов, соответствующих маршруту to.

Вот код, который решил мою проблему: 

import VueRouter from 'vue-router';

class Router extends VueRouter {
  resolve(to, current, append) {
    const route = { ...to };
    route.params = { ...route.params, language: 'en' };
    return super.resolve(route, current, append);
  }
}

Vue.use(Router);

const router = new Router({
  ...
})
...