Vue Router学习（五）——编程式导航

躺平使者
1,127 阅读2分钟

前言

前面章节我们都是通过router-link进行路由之间的跳转，这种是声明式导航。但日常开发中我们需要从代码层面进行路由跳转，也就是编程式导航，本节我们就来学习一下。

编程式导航

编程式导航在代码层面操作路由，这些操作都是router实例方法，要想使用这些方法就得先访问router实例。vue版本不同访问router实例的方法也不同：

  • vue2.x(2.7可以引入组合式API)使用编程式API可以通过this.$router进行访问。
  • vue3.x组合式API，在setup中需要使用useRouter函数。 router中有很多实例方法，下面我们了解一下导航相关的。

push方法

router.push方法用于跳转路由，可以导航到任意页面，具体的语法为：

   router.push(to)

to参数为具体的路由，ts类型为RouteLocationRaw ，返回一个promise。

1698291600819.png
RouteLactionRaw是一个联合类型，核心是两种形式：

  • RouteQueryAndHash&LocationAsPath&RouteLocationOptions：path(路径)、query(传参)、hash形式组合。
  • RouteQueryAndHash & LocationAsRelativeRaw & RouteLocationOptions：name(命令视图)、params(传参)形式组合。
    interface RouteQueryAndHash {
    query?: LocationQueryRaw;
    hash?: string;
   }
   interface LocationAsPath {
    path: string;
   }
   interface LocationAsRelativeRaw {
    name?: RouteRecordName;
    params?: RouteParamsRaw;
   }

push的参数对象不能混用，比如name与query不能一块使用，这是由具体的ts类型决定的。

router.push({ name: 'home', params: { id: '123' } })

router.push({ path: '/home', query: { id: '123' } })

push的原理就是向history添加新记录，如果我们在A页面用push导航到B页面，点击浏览器退回页面就会回到A页面。虽说原理很简单，但源码还是复杂的，毕竟要考虑各种情况。首先会判断是否有重定向地址，如果有跳转重定向地址。 image.png
pushWithRedirect还考虑了replace导航，通过一系列判断最终调用routerHistory的push方法。

image.png routerHistory表示的就是历史路由，继续探索里面的push方法，我们就会发现push的底层API是History：pushState()。

1698333081622.jpg

replace方法

router.replace替换当前路由，replace的用法跟push方法基本一样，不过该方法不会往浏览器的历史记录添加记录。

1698333356040.png
查看push源码时我们就提到replace方法也包含其中，而replace的底层API就是History.replaceState() 。如果我们在用push导航时将replace属性设置为true，结果跟直接调用replace方法一样。

   router.push({ name: 'login', replace:true })
   router.replace({ path: '/login' })

go方法

router.go(n)：将路由前进或后退到第n条记录，n为整数，正数表示前进；负数表示后退。浏览器中前进按钮就相当于router.go(1)，后退就相当于router.go(-1)。通过push与replace方法我们可以猜到router.go用到的API就是history.go()。

image.png

总结

编程式导航极大地方便了我们的开发，底层方法都是通过window.history方法实现的，利用简单API给导航路由附加各种功能，源码还是值得我们好好学习的。

avatar
文章
阅读
粉丝