木灵鱼儿

木灵鱼儿

阅读:211

最后更新:2022/08/20/ 23:11:55

vue-router4 新增功能

动态路由

这个其实在3版也有,不过3版原来使用的api是addRoutes,这个api顾名思义,就是可以传入一个路由数组来进行注册,后来被废弃,现在3版和4版统一采用addRouteapi。

addRoute一次只能添加一个路由,但是有两种用法:

添加一条新路由

router.addRoute({
  path: "/about",
  name: "About",
  component: () => import("../views/About.vue"),
})

给已存在的路由注册一个子路由,父路由必须有name属性

router.addRoute("myAbout", {
  path: "/about",
  name: "About",
  component: () => import("../views/About.vue"),
})

两种用法,主要是通过name属性来进行区分的,如果已经存在一个相同的name路由,会删除之前的路由,所以推荐在创建路由时都写上name属性。

useRouter、useRoute、组件的路由生命钩子

这几个就不具体介绍了,非常简单易懂,应该是必备的知识点,不懂直接看官网例子吧。

RouterLink和useLink

有时候我们可能需要创建一个自定义的导航菜单,我们可以通过import引入RouterLink拿到它的props属性赋值到我们自己组件的props属性上,这样我们自己的组件除了拥有自己自定义的props,还拥有和官方<router-link>元素一样的props。

除此之外,我们还可以通过将props作为值传递给useLink,从而获取跳转路由的相关方法和属性。

import { RouterLink, useLink } from 'vue-router'

export default {
  name: 'AppLink',

  props: {
    // 如果使用 TypeScript,请添加 @ts-ignore
    ...RouterLink.props,
    inactiveClass: String,  //自定义的props属性
  },

  setup(props) {
    // `props` 包含 `to` 和任何其他可以传递给 <router-link> 的 prop
    const { navigate, href, route, isActive, isExactActive } = useLink(props)

    return { isExternalLink }
  },
}
  • route:解析后的规范化的地址
  • href:解析后的 URL。将会作为一个 <a> 元素的 href 属性。如果什么都没提供,则它会包含 base
  • navigate:触发导航的函数。 会在必要时自动阻止事件,和 router-link 一样。例如:ctrl 或者 cmd + 点击仍然会被 navigate 忽略。
  • isActive:是否 active class,是一个布尔值
  • isExactActive:是否完全匹配 exact active class,是一个布尔值

这些属性全都是响应式数据,都可以进行监听变化。

具体可参考:<router-link> 的 v-slot

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 211

相关文章