声明式导航＜router-link＞：解决a标签自带的默认样式

路由导航分为；声明式导航和编程式导航

声明式导航：a链接的形式： 

编程式导航：location.href的形式：

浏览器自带的BOM方法：widow.onhashchange()：监听当前路径

vue路由的声明式导航： <router-link></router-link>:

代码：

<template>
  <div id="app">
    <ul>
      <li>
        <!-- 使用 router-link 组件进行导航 -->
        <!-- 通过传递属性 `to` 来指定跳转链接 -->
        <!-- `<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签 -->
        <router-link to="/films" active-class="yiyiactive">电影</router-link>
      </li>
      <li>
        <router-link to="/cinemas" active-class="yiyiactive">影院</router-link>
      </li>
    </ul>
  </div>
</template>

结果：

• <router-link></router-link>是一个组件；
• to、active-class是属性，名字不能改； 

还有一个tag属性，指定<router-link>渲染成某一个标签，看代码：

• 指定成li标签：

<template>
  <div id="app">
    <ul>
      <li>
        <!-- 使用 router-link 组件进行导航 -->
        <!-- 通过传递属性 `to` 来指定跳转链接 -->
        <!-- `<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签 -->
        <router-link to="/films" active-class="yiyiactive" tag="li">电影</router-link>
      </li>
      <li>
        <router-link to="/cinemas" active-class="yiyiactive" tag="li">影院</router-link>
      </li>
    </ul>
  </div>
</template>

• 结果：

但是tag属性vue-router4以后的版本都不支持了，包括4，换成了下面的写法：

<router-link to="/films" custom v-slot="{navigate,isActive}">
          <li @click="navigate" :class="isActive?'yiyiactive':''">影院</li>
</router-link>

• to没变，还是指向要跳转的链接；
• custom v-slot后面是一个对象，对象里面是两个函数；
• li标签这个可以自己定义，就像上面tag可以随意指定；
• ：class后面是一个三目选择器；
• 含义是点击哪一个，就给哪一个标签加上class样式，后面的：yiyiactive是自己定义的样式 

当然这个属性不止可以加载li标签身上，看下面的写法；

注意：要区分好router-link和li标签：

• router-link是能让那个li标签里的内容实现路由跳转，li标签还是要有的呀，两种只是写法不一样；
• 第一种是li标签写在外面，第二种是router-link标签写在外面。 

---

解决a标签自带默认样式：

<router-link>的原理和属性介绍：（详细版）

（1）只有一个属性to，to的含义是指向要跳转的路由：

<router-link to="/films/comingsoon">即将上映</router-link>

结果：

结论：看上面的结果，router-link的原理是：当点击这个文本-即将上映时，router-link标签其实会变成a标签，to属性相当于a标签里的href属性，然后自动给a标签加上class属性，默认属性是router-link-exact-active 及 router-link-active  。 但只是加了两个属性名而已，并没有规定样式，如果需要规定样式，可以自己规定：

.router-link-exact-active{
    //style样式
    ...
}
.router-link-active{
    ...
}

但是a标签是有默认样式的，就是像上面这样：蓝字下划线的，样式如下：

（2）更改a标签的默认样式：（去掉router-link默认样式）

因为a标签有默认样式，如果你想自定义样式，就需要把a标签的样式给去掉或者换成自己想要的样式，例如：

a{
    //去掉下换线
    text-decoration:none;

    //文字颜色更改
    color:black;
}

然后通过 router-link-exact-active 及 router-link-active 来增加新的样式。

这个默认的class属性名router-link-exact-active和 router-link-active我们也是可以自定义的。

（3）active-class选择器、exact-active-class选择器：

router-link-exact-active及router-link-active只是一个选择器名字而已，如果觉得太长，可以随意更改，比如：下面是更改为 yiyiactive。

如何更改：通过active-active更改router-link-active，通过exact-active-class更改router-link-exact-active。

//原来的
active-class="router-link-active"
exact-active-class="router-link-exact-active"

//现在的
active-class="yiyiactive" //yiyiactive是自定义的，名字随意起
exact-active-class = "liliactive"

active-class和exact-active-class这两个属性是固定的，不能更改。

（4）tag属性：

因为a标签有默认样式，我们想设置自定义样式就很不方便， 还要去掉a的默认样式。

router-link标签还有一个tag属性，用来指定标签，也就是替换到a标签，把a标签换成其他的标签显示：

<--指定为li标签-->
<router-link to="/films/comingsoon" tag="li" >即将上映</router-link>

结果：

这样做既可以避免a标签的默认样式，又可以跟a标签有一样的跳转效果。

但是：tag属性有一个缺点就是，在vue-router4以后就不支持了。 

（5）custom v-slot写法：

所以我们要换成一种更复杂的写法：custom v-slot写法

<router-link to="/films/nowplaying" custom v-slot="{navigate,isActive}">
          <li @click="navigate" :class="isActive?'yiyiactive':''">即将上映</li>
</router-link>

这个写法上面有详细的解释，在这里强调几点：

• 代码中的<li>标签可以换成任何标签，就跟上面tag指定标签一个意思；
• class属性要动态绑定，因为isActive是变量，yiyiactive是自定义样式， 

结果：

这种写法，不会有格外的class属性加，自己规定属性。

所以这种写法虽然比较复杂，但是用起来很方便，推荐推荐。