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

最新推荐文章于 2024-11-28 17:50:18 发布

原创最新推荐文章于 2024-11-28 17:50:18 发布 · 556 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #蓝桥杯

本文介绍了Vue Router中不同方式创建导航链接的方法，包括使用a标签、router-link组件及自定义class属性等，并展示了如何在Vue Router 4中正确使用v-slot API。

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>

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