Как лучше сделать обработку переходов на страницы в Element UI?

Question

[beduin01]

Вот дока.

Вот мое меню:

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
           <el-menu-item index="1"><a href="/">General</a></el-menu-item>
           <el-menu-item index="2"><a href="/faq">FAQ</a></el-menu-item>
           <el-menu-item index="3"><a href="/book">Book</a></el-menu-item>
</el-menu>

Я не совсем уверен как лучше обрабатывать переход по ссылкам. С одной стороны я могу использовать обработку через тег href c другой можно делать через метод handleSelect.

Никак не пойму плюсы и минусы одного и другого подходов?

Answer 1

[xcite]

Лучше делать это вместе с роутингом. Например вот так.
В компоненте:

<el-menu :router="true">
      <el-menu-item index="/" :route="{ name: 'Home'}">Home</el-menu-item>
      <el-menu-item index="/about" :route="{ name: 'About' }">About</el-menu-item>
</el-menu>

В конфиге роута:

routes: [{
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/about',
      name: 'About',
      component: About
    }]

Comments

[beduin01]

А чем этот подход лучше других?

[xcite]

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

Answer 2

[Александр Дроздов]

handleSelect нужен если все завязано на index, у тебя же просто ссылки уже есть, так что можешь убрать handleSelect.