Comparación entre la etiqueta vue-router y v-solt

1. Antes de vue-router4.0, usábamos etiquetas para personalizar en qué etiqueta se representaría el enlace del enrutador.

<router-link to='/' tag="span">
// 从代码中我们可以看到会被渲染成 span 标签

A continuación, echemos un vistazo a la diferencia entre enrutador-enlace-activo y enrutador-enlace-exact-activo:

1.<router-link to='/'>
2.<router-link to='/a'>
3.<router-link to='/b'>
4.<router-link to='/ab'>
假如我现在有四种路径
router-link-active相当于模糊匹配,及2或3点击,1号(2,3是1的子路由)也会添加router-link-active样式;点击4号,1和2也会添加该类;
router-link-exact-active相当于精准匹配,只会添加到点击的标签上;

如果我们想修改选中的样式可以按照下面的写法:
<style>
    .router-link-exact-active{
        border-bottom:2px solid #1989fa;
    }
</style>

2. Después de vue-router4.x, se abandonó la etiqueta y se introdujo el concepto de v-solt.

<router-link custom to="/catcan" v-slot="{ href,route,isActive,navigate,isExactActive}">
    <li @click="navigate">我是路由自定义标签</li>
</router-link>


// 下面我们就来解释一下 他用法的意义

// custom 属性的意思,就是允许自定义标签,如果不写就会定义成 a 标签
// href 就是解析后的 url
// route 就是解析后的规范的route对象
// navigate 导航的触发函数
// isActive 是否匹配的状态
// isExactActive 是否精准匹配的状态

Supongo que te gusta

Origin blog.csdn.net/m0_45865109/article/details/125554659
Recomendado
Clasificación