What is the best way to handle page transitions in Element UI?

Question

Vue.js

Here is the dock .
Here is my menu:

<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>

I'm not entirely sure how best to handle following links. On the one hand, I can use the processing through the href tag; on the other hand, I can do it through the handleSelect method.
I do not understand the pros and cons of one and the other approaches?

Answer 1

It is better to do it together with routing. For example like this.
In the component:

<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>

In the route config:

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