vue-router之 tag 和 v-solt 对比

1.在vue-router4.0之前，我们都是使用 tag 来自定义 router-link 渲染成什么标签

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

接下来我们在来看一下 router-link-active及router-link-exact-active区别： 

 

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.在vue-router4.x 之后废弃了 tag 有了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 是否精准匹配的状态