vue-router 一些容易被忽略的知识点

栏目: JavaScript · 发布时间: 5年前

  • 路由 class 匹配

    <router-link> 路由匹配后会给该标签添加 class 属性值 .router-link-active ,该功能在嵌套路由中十分方便

    class 的实际属性值可以通过 的 active-class 来控制,全局默认值则通过路由构造选项 linkActiveClass 来控制

    默认情况下,当前路由的所有父级会默认添加 active-class ,即 当前处于 /user/1 会给当前页面的 <router-link to="/"> 添加 active-class ,如果不需要此项,给 <router-link> 添加 exact 即可,精准匹配的 class 通过 exact-active-class 控制

    示例:JSFiddle

  • 通配符路由

    路由配置: {path: '/user-*'} ,访问 /user-admin 路由,可在 $route.params.pathMatch 获取到 'admin' (pathMatch 仅在 vue-router@3.0.2+ 可用,低于此版本使用 $route.params[0] 尝试获取)

    示例:JSFiddle

    文档: 捕获所有路由或 404 Not found 路由

  • 路由高级匹配模式

    vue-router 使用 path-to-regexp 作为路由匹配引擎,该库可以通过输入的路径生成匹配规则的正则表达式,从而实现路由匹配功能。

    path-to-regexp 中常用的方法 pathToRegexp(path, keys, options) 第三个参数为 pathToRegexpOptions 编译正则的选项,在 vue-router@2.6.0+ 版本可以通过配置 routepathToRegexpOptions 参数添加高级配选项。

    参考 例子 ,其可通过 '/optional-params/:foo?' 实现可选 param ,也可通过 '/params-with-regex/:id(\\d+)' 实现仅匹配数字 param (非命中路由向后匹配)。

    pathToRegexpOptions 的内容为:

    • sensitive 大小写敏感 (default: false)
    • strict 末尾斜杠是否精确匹配 (default: false)
    • end 全局匹配 (default: true)
    • start 从开始位置展开匹配 (default: true)
    • delimiter 指定其他分隔符 (default: '/')
    • endsWith 指定标准的结束字符
    • whitelist 指定分隔符列表 (default: undefined, any character)

    源码: vue-router/src/create-route-map.js:154 文档:高级匹配模式

  • 编程式导航的钩子处理

    vue-router@2.2.0+ ,可选的在 router.pushrouter.replace 中提供 onCompleteonAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。 该功能可用在少数埋点场景,而不用配置复杂的路由钩子。

  • 路由重定向

    route 配置 redirect 属性可使路由重定向到指定路由,该属性支持 String/Object/Function 三种类型的值,其中 Function 的参数为 to 对象

    给重定向的中间路由添加 beforeEachbeforeLeave 不会有效果,给 router 添加的钩子也不能检测到此次重定向,如果需要判断重定向来源,可使用路由对象 $route.redirectedFrom 判断

    该功能适合路由 path 修改后保留原路由的重定向

    文档:重定向

  • 嵌套命名视图

    在平级展示多个视图时(单个视图使用多个平级的 <router-view> ),可以用到 <router-view>name prop 例如在 sidebar/list 的布局页面上,不用在父级视图容器去书写许多子组件的逻辑,只需要在路由配置中配置好相关页面组件,从而进行组件关系解耦,也能高效控制子视图渲染

    例子:JSFiddle

    文档:嵌套命名视图

  • 路由别名

    route 配置 alias 属性可以使访问者保持原有 url 却访问到指定路由中去。

    该属性支持 StringArray 两种类型,当 alias 与其他路由重复时,以先申明的路由为准,同时别名不会进行路由 class 匹配

    文档:别名

  • 路由组件传参

    该功能旨在给组件与路由解除耦合关系,给 route 配置 props: true 同时组件内 props 配置与 prams 相同的变量,可以直接通过访问 props 而不用通过 $route.params 去访问参数

    如果 props 是一个对象,对象内容会当作静态内容传入组件作为 props

    props 为一个函数,函数接收一个 route 参数,可以使 query 作为 props 传入组件或实现更多高级功能

    文档:路由组件传参

  • 完整的导航解析流程

    1. 导航被触发。
    2. 在失活的组件里调用离开守卫。
    3. 调用全局的 beforeEach 守卫。
    4. 在重用的组件里调用 beforeRouteUpdate 守卫 (vue-router@2.2+)。
    5. 在路由配置里调用 beforeEnter。
    6. 解析异步路由组件。
    7. 在被激活的组件里调用 beforeRouteEnter。
    8. 调用全局的 beforeResolve 守卫 (vue-router@2.5+)。
    9. 导航被确认。
    10. 调用全局的 afterEach 钩子。
    11. 触发 DOM 更新。
    12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

    文档:完整的导航解析流程

  • 滚动行为

    创建 Router 实例,可以提供一个 scrollBehavior 方法,该方法接收 tofromsavedPosition (该页面原存在的xy值,仅在通过浏览器前进后退中可用)

    在该方法中返回 {selector:to.hash} 还可实现类似于“滚动到锚点”的行为, vue-router@2.6.0+ 还可返回 {offset?:{x,y}} 进行位置偏移,注意该偏移负值为向负方向偏移

    异步滚动 通常用于小众的过渡组件(transition)和滚动行为同时进行的情况下,官方实例未给太多相关信息

    文档:滚动行为

  • 组件懒加载-按组分块

    SPA(single page application)由于 All in JS 的特性,会使得首屏加载比较慢,很多人都推荐使用 Webpack 的 代码分割功能减小单个 JS 体积,当所有页面组件使用动态加载则会使页面请求过多而得不偿失,所以组件按组分块则应运而生:

    const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
      const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
      const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')
    复制代码

    该功能需要 webpack@2.4+ 支持

    文档:把组件按组分块

  • 获取路由匹配组件

    router.getMatchedComponents(location?)

    该函数可以获取传入参数在路由表中匹配的路由对象数组,官方文档中写到通常在服务端渲染数据预加载的时候,也可用于在获取当前路由对象数组的时候

    如果需要获取当前路由记录(就是路由构造选项 routes 配置数组中的对象副本,包含children 数组),可用 route.matched

    文档:getMatchedComponents 文档:$route.matched

  • 解析路由

    router.resolve(location, current?, append?)

    该函数可同时导出一个类似浏览器的 location 对象和一个根据匹配到的路由记录 resolved ,如果没有匹配到对应的对象, resolved 字段默认返回 404 组件或错误数据

    文档:router.resolve

  • 添加路由

    router.addRoutes(routes:Array<RouteConfig>)

    该函数可以用户触发添加路由到路由表中,可以尝试在用户权限控制中使用

    文档:router.addRoutes


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java编程思想

Java编程思想

埃克尔 / 机械工业出版社 / 2007-5-1 / 79.00元

《Java编程思想(英文版•第4版)》内容简介:特色:1.适合初学者与专业人员的经典的面向对象的叙述方式;为更新的Java SE5/6的相关内容增加了新的示例和章节。2.测验框架显示程序输出。3.设计模式贯穿于众多示例中:适配器、桥接器、职责链、命令、装饰器、外观、工厂方法、享元、点名、数据传输对象、空对象、代理、单例、状态、策略、模板方法以及访问者。4.为数据传输引入了XML;为用户界面引入了S......一起来看看 《Java编程思想》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具