木灵鱼儿

木灵鱼儿

阅读：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

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

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 211

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译