vue router 声明式导航新老版本的写法

0.a 链接

<li><a href="/#/films">电影</a></li>
<li><a href="/#/cinermas">影院</a></li>
<li><a href="/#/center">我的</a></li>

1. 看 dom 结构，这种是有 a 标签的。

<li><router-link to="/films">电影</router-link> </li>
<li><router-link to="/cinermas">影院</router-link> </li>
<li><router-link to="/center">我的</router-link> </li>

也可以添加自定义 class 属性名，然后添加样式。

 <li><router-link to="/films" router-link-active="myclassactive">电影</router-link> </li>

2.

<router-link to="/films" tag='li'>电影</router-link>
<router-link to="/cinermas" tag='li'>影院</router-link>
<router-link to="/center" tag='li'>我的</router-link>

3. 传递了一个对象， navigate ,isActive.

vue-router.esm.js?8c4f:16 [vue-router] <router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.

出现这个警告，是因为在 vue router4 中需要按照下面这个方法来写。 

      <router-link to="/films" custom v-slot="{navigate,isActive}">
      <li @click="navigate" :class="isActive?'myactive':''">
        电影--{{isActive}}
      </li>
      </router-link>
      <router-link to="/cinermas" custom v-slot="{navigate,isActive}">
      <li @click="navigate" :class="isActive?'myactive':''">
        影院--{{isActive}}
      </li>
      </router-link>
      <router-link to="/center" custom v-slot="{navigate,isActive}">
      <li @click="navigate" :class="isActive?'myactive':''">
        我的--{{isActive}}
      </li>
      </router-link>