木灵鱼儿

木灵鱼儿

阅读：539

最后更新：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

文章分类 vue3 快速上手
文章标签 vue-routervue3动态路由addRouteuseLinkRouterLink
木灵鱼儿

木灵鱼儿

发布了 705 篇文章获得点赞 0获得阅读 539

版权申明

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

one
two
three

关于作者

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

相关文章

卷轴地图卷轴地图
尾调用优化尾调用优化
性能测试性能测试
生成器 Generator生成器 Generator
语法语法