vue-router更新

v-slot API (3.1.0 新增)

• router-link 通过一个作用域插槽暴露底层的定制能力。

• 在使用 v-slot API 时，需要向 router-link 传入一个单独的子元素。否则 router-link 将会把子元素包裹在一个 span 元素内。

  • href：解析后的 URL。将会作为一个 a 元素的 href attribute。
  • route：解析后的规范化的地址。注释：就是当前route对象
  • navigate：触发导航的函数。会在必要时自动阻止事件，和 router-link 同理。
    • 注释：即执行navigate(e)路由被确认，执行页面跳转。需要传入事件对象为参数
  • isActive：如果需要应用激活的 class 则为 true。允许应用一个任意的 class。
    • 注释：被激活的是当前url所包含的所有片段，例如：当前路由为http://localhost:8080/about/456时http://localhost:8080/的isActive为true
  • isExactActive：如果需要应用精确激活的 class 则为 true。允许应用一个任意的 class。
    • 注释：该标签是否被精确激活

• 如果你在 元素上添加一个 target="_blank"，则 @click="navigate" 处理器会被忽略。

  <router-link to="/about" v-slot="{ href, route, navigate, isActive, isExactActive }"

  <span @click="navigate" @keypress.enter="navigate" role="link">About Us