Vue3中 router 带来了哪些变化?
作者:Leiy
https://segmentfault.com/a/1190000022582928
前言
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。
本文基于的源码版本是 vue-next-router alpha.10,为了与 Vue 2.0 中的 Vue Router 区分,下文将 vue-router v3.1.6 称为 vue2-router
。
本文旨在帮助更多人对新版本 Router 有一个初步的了解,如果文中有误导大家的地方,欢迎留言指正。
重大改进
此次 Vue
的重大改进随之而来带来了 Vue Router 的一系列改进,现阶段(alpha.10
)相比 vue2-router
的主要变化,总结如下:
1. 构建选项 mode
由原来的 mode: "history"
更改为 history: createWebHistory()
。(设置其他 mode
也是同样的方式)。
// vue2-routerconst router = new VueRouter({ mode: 'history', ...})// vue-next-routerimport { createRouter, createWebHistory } from 'vue-next-router'const router = createRouter({ history: createWebHistory(), ...})
2. 构建选项 base
传给 createWebHistory()
(和其他模式) 的第一个参数作为 base
。
//vue2-routerconst router = new VueRouter({ base: __dirname,})// vue-next-routerimport { createRouter, createWebHistory } from 'vue-next-router'const router = createRouter({ history: createWebHistory('/'), ...})
4. 捕获所有路由 ( /*
) 时,现在必须使用带有自定义正则表达式的参数进行定义:/:catchAll(.*
)。
// vue2-routerconst router = new VueRouter({ mode: 'history', routes: [ { path: '/user/:a*' }, ],})// vue-next-routerconst router = createRouter({ history: createWebHistory(), routes: [ { path: '/user/:a:catchAll(.*)', component: component }, ],})
当路由为 /user/a/b
时,捕获到的 params
为 {"a": "a", "catchAll": "/b"}
。
5. router.match
与 router.resolve
合并在一起为 router.resolve
,但签名略有不同。
// vue2-router...resolve ( to: RawLocation, current?: Route, append?: boolean) { ... return { location, route, href, normalizedTo: location, resolved: route }}// vue-next-routerfunction resolve( rawLocation: Readonly<RouteLocationRaw>, currentLocation?: Readonly<RouteLocationNormalizedLoaded> ): RouteLocation & { href: string } { ... let matchedRoute = matcher.resolve(matcherLocation, currentLocation) ... return { fullPath, hash, query: normalizeQuery(rawLocation.query), ...matchedRoute, redirectedFrom: undefined, href: routerHistory.base + fullPath, }}
6. 删除 router.getMatchedComponents
,可以从 router.currentRoute.value.matched
中获取。
router.getMatchedComponents
返回目标位置或是当前路由匹配的组件数组 (是数组的定义/构造类,不是实例)。通常在服务端渲染的数据预加载时使用。
[{ aliasOf: undefined beforeEnter: undefined children: [] components: {default: {…}, other: {…}} instances: {default: null, other: Proxy} leaveGuards: [] meta: {} name: undefined path: "/" props: ƒ (to) updateGuards: []}]
7. 如果使用 <transition>
,则可能需要等待 router
准备就绪才能挂载应用程序。
app.use(router)// Note: on Server Side, you need to manually push the initial locationrouter.isReady().then(() => app.mount('#app'))
一般情况下,正常挂载也是可以使用 <transition>
的,但是现在导航都是异步的,如果在路由初始化时有路由守卫,则在 resolve
之前会出现一个初始渲染的过渡,就像给 <transiton>
提供一个 appear 一样。
8. 在服务端渲染 (SSR) 中,需要使用一个三目运算符手动传递合适的 mode
。
let history = isServer ? createMemoryHistory() : createWebHistory()let router = createRouter({ routes, history })// on server onlyrouter.push(req.url) // request urlrouter.isReady().then(() => { // resolve the request})
9. push
或者 resolve
一个不存在的命名路由时,将会引发错误,而不是导航到根路由 "/"
并且不显示任何内容。
在 vue2-router
中,当 push
一个不存在的命名路由时,路由会导航到根路由 "/"
下,并且不会渲染任何内容。
const router = new VueRouter({ mode: 'history', routes: [{ path: '/', name: 'foo', component: Foo }]}this.$router.push({name: 'baz'})
浏览器控制台只会提示如下警告,并且 url
会跳转到根路由 /
下。
在 vue-next-router
中,同样做法会引发错误。
const router = createRouter({ history: routerHistory(), routes: [{ path: '/', name: 'foo', component: Foo }]})...import { useRouter } from 'vue-next-router'...const router = userRouter()router.push({name: 'baz'})) // 这段代码会报错
Active-RFCS
以下内容的改进来自 active-rfcs
(active
就是已经讨论通过并且正在实施的特性)。
- 0021-router-link-scoped-slot
- 0022-router-merge-meta-routelocation
- 0028-router-active-link
- 0029-router-dynamic-routing
- 0033-router-navigation-failures - 本文略
router-link-scoped-slot
这个 rfc 主要提议及改进如下:
- 删除
tag
prop - 使用作用域插槽代替 - 删除
event
prop - 使用作用域插槽代替 - 增加
scoped-slot
API - 停止自动将
click
事件分配给内部锚点 - 添加
custom
prop 以完全支持自定义的router-link
渲染
在 vue2-router 中,想要将 <roter-link>
渲染成某种标签,例如 <button>
,需要这么做:
<router-link to="/" tag="button">按钮</router-link>!-- 渲染结果 --><button>按钮</button>
根据此次 rfc
,以后可能需要这样做:
<router-link to="/" custom v-slot="{ navigate, isActive, isExactActive }"> <button role="link" @click="navigate" :class="{ active: isActive, 'exact-active': isExactActive }"> 按钮 </button><router-link>!-- 渲染结果 --><button role="link">按钮</button>
更多详细的介绍请看这个 rfc 。
router-active-link
这个 rfc 改进的缘由是 gayhub
上名为 zamakkat 的大哥提出来的,他的 issues 主要内容是,有一个嵌套组件,像这样:
Foo (links to /pages/foo)|-- Bar (links to /pages/foo/bar)
需求:需要突出显示当前选中的页面(并且只能突出显示一项)。
- 如果用户打开
/pages/foo
,则仅Foo
高亮显示。 - 如果用户打开
/pages/foo/bar
,则仅Bar
应高亮显示。
但是,Bar
页面也有分页,选择第二页时,会导航到 /pages/foo/bar?page=2
。vue2-router
默认情况下,路由匹配规则是「包含匹配」。也就是说,当前的路径是 /pages
开头的,那么 <router-link to="/pages/*">
都会被设置 CSS
类名。
在这个示例中,如果使用「精确匹配模式」(exact: true
),则精确匹配将匹配 /pages/foo/bar
,不会匹配 /pages/foo/bar?page=2
因为它在比较中包括查询参数 ?page=2
,所以当选择第二页面时,Bar
就不高亮显示了。
所以无论是「精确匹配」还是「包含匹配」都不能满足此需求。
为了解决上述问题和其他边界情况,此次改进使得 router-link-active
应用方式更严谨,处理此问题的核心:
// 确认路由 isActive 的行为function includesParams( outer: RouteLocation['params'], inner: RouteLocation['params']): boolean { for (let key in inner) { let innerValue = inner[key] let outerValue = outer[key] if (typeof innerValue === 'string') { if (innerValue !== outerValue) return false } else { if ( !Array.isArray(outerValue) || outerValue.length !== innerValue.length || innerValue.some((value, i) => value !== outerValue[i]) ) return false } } return true}
详情请参见这个 rfc。
router-merge-meta-routelocation
在 vue2-router
中,在处理嵌套路由时,meta
仅包含匹配位置的 route meta
信息。 看个栗子:
{ path: '/parent', meta: { nested: true }, children: [ { path: 'foo', meta: { nested: true } }, { path: 'bar' } ]}
在导航到 /parent/bar
时,只会显示当前路由对应的 meta
信息为 {}
,不会显示父级的 meta
信息。
meta: {}
所以在这种情况下,需要通过 to.matched.some()
检查 meta
字段是否存在,而进行下一步逻辑。
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.nested)) next('/login') else next()})
因此为了避免使用额外的 to.matched.some
, 这个 rfc
提议,将父子路由中的 meta
进行第一层合并(同 Object.assing()
)。如果再遇到上述嵌套路由时,将可以直接通过 to.meta
获取信息。
router.beforeEach((to, from, next) => { if (to.meta.nested) next('/login') else next()})
更多详细介绍请看这个 rfc。
router-dynamic-routing
这个 rfc 的主要内容是,允许给 Router 添加和删除(单个)路由规则。
router.addRoute(route: RouteRecord)
- 添加路由规则router.removeRoute(name: string | symbol)
- 删除路由规则router.hasRoute(name: string | symbol): boolean
- 检查路由是否存在router.getRoutes(): RouteRecord[]
- 获取当前路由规则的列表
相比 vue2-router
删除了动态添加多个路由规则的 router.addRoutes API。
在 Vue 2.0 中,给路由动态添加多个路由规则时,需要这么做:
router.addRoutes( [ { path: '/d', component: Home }, { path: '/b', component: Home } ])
而在 Vue 3.0 中,需要使用 router.addRoute()
单个添加记录,并且还可以使用更丰富的 API:
router.addRoute({ path: '/new-route', name: 'NewRoute', component: NewRoute}) // 给现有路由添加子路由router.addRoute('ParentRoute', { path: 'new-route', name: 'NewRoute', component: NewRoute})// 根据路由名称删除路由router.removeRoute('NewRoute') // 获得路由的所有记录const routeRecords \= router.getRoutes()
关于 RfCS
上提出的改进,这里就介绍这么多,想了解更多的话,请移步到 active-rfcs。
走进源码
相比 vue2-router
的 ES6-class
的写法 vue-next-router
的 function-to-function
的编写更易读也更容易维护。
Router 的 install
暴露的 Vue 组件解析入口相对来说更清晰,开发插件时定义的 install
也简化了许多。
我们现看下 vue2-router
源码中 install
方法的定义:
import View from './components/view'import Link from './components/link'export let _Vueexport function install (Vue) { // 当 install 方法被同一个插件多次调用,插件将只会被安装一次。 if (install.installed && _Vue === Vue) return install.installed = true _Vue = Vue const isDef = v => v !== undefined const registerInstance = (vm, callVal) => { let i = vm.$options._parentVnode if (isDef(i) && isDef(i = i.data) && isDef(i = i.registerRouteInstance)) { i(vm, callVal) } } // 将 router 全局注册混入,影响注册之后所有创建的每个 Vue 实例 Vue.mixin({ beforeCreate () { if (isDef(this.$options.router)) { this._routerRoot = this this._router = this.$options.router this._router.init(this) Vue.util.defineReactive(this, '_route', this._router.history.current) } else { this._routerRoot = (this.$parent && this.$parent._routerRoot) || this } // 注册实例,将 this 传入 registerInstance(this, this) }, destroyed () { registerInstance(this) } }) // 将 $router 绑定的 vue 原型对象上 Object.defineProperty(Vue.prototype, '$router', { get () { return this._routerRoot._router } }) // 将 $route 手动绑定到 vue 原型对象上 Object.defineProperty(Vue.prototype, '$route', { get () { return this._routerRoot._route } }) // 注册全局组件 RouterView、RouterLink Vue.component('RouterView', View) Vue.component('RouterLink', Link) const strats = Vue.config.optionMergeStrategies // use the same hook merging strategy for route hooks strats.beforeRouteEnter = strats.beforeRouteLeave = strats.beforeRouteUpdate = strats.created}
我们可以看到,在 2.0
中,Router
提供的 install()
方法中更触碰底层,需要用到选项的私有方法 _parentVnode()
,还会用的 Vue.mixin()
进行全局混入,之后会手动将 $router
、$route
绑定到 Vue 的原型对象上。
VueRouter.install = installVueRouter.version = '__VERSION__'// 以 src 方法导入if (inBrowser && window.Vue) { window.Vue.use(VueRouter)}
做了这么多事情之后,然后会在定义 VueRouter 类的文件中,将 install()
方法绑定到 VueRouter 的静态属性 install
上,以符合插件的标准。
安装 Vue.js 插件。如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
我们可以看到,在 2.0
中开发一个插件需要做的事情很多,install
要处理很多事情,这对不了解 Vue 的童鞋,会变得很困难。
说了这么多,那么 vue-next-router
中暴露的 install
是什么样的呢?applyRouterPlugin()
方法就是处理 install()
全部逻辑的地方,请看源码:
import { App, ComputedRef, reactive, computed } from 'vue'import { Router } from './router'import { RouterLink } from './RouterLink'import { RouterView } from './RouterView'export function applyRouterPlugin(app: App, router: Router) { // 全局注册组件 RouterLink、RouterView app.component('RouterLink', RouterLink) app.component('RouterView', RouterView) //省略部分代码 // 注入 Router 实例,源码其他地方会用到 app.provide(routerKey, router) app.provide(routeLocationKey, reactive(reactiveRoute))}
基于 3.0
使用 composition API
时,没有 this
也没有混入,插件将充分利用 provide
和 inject
对外暴露一个组合函数即可,当然,没了 this
之后也有不好的地方,看这里。
provide
和inject
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
再来看下 vue-next-router
中 install()
是什么样的:
export function createRouter(options: RouterOptions): Router { // 省略大部分代码 const router: Router = { currentRoute, addRoute, removeRoute, hasRoute, history: routerHistory, ... // install install(app: App) { applyRouterPlugin(app, this) }, } return router}
很简单,在 vue-next-router
提供的 install()
方法中调用 applyRouterPlugin
将 Vue 和 Router 作为参数传入。
最后在应用程序中使用 Router 时,只需要导入 createRouter
然后显示调用 use()
方法,传入 Vue,就可以在程序中正常使用了。
import { createRouter, createWebHistory } from 'vue-next-router'const router = createRouter({ history: createWebHistory(), strict: true, routes: [ { path: '/home', redirect: '/' }})const app = createApp(App)app.use(router)
没有全局 $router
、$route
我们知道在 vue2-router 中,通过在 Vue 根实例的 router
配置传入 router
实例,下面这些属性成员会被注入到每个子组件。
- this.$router - router 实例。
- this.$route - 当前激活的路由信息对象。
但是 3.0 中,没有 this
,也就不存在在 this.$router | $route
这样的属性,那么在 3.0 中应该如何使用这些属性呢?
我们首先看下源码暴露的 api
的地方:
// useApi.tsimport { inject } from 'vue'import { routerKey, routeLocationKey } from './injectionSymbols'import { Router } from './router'import { RouteLocationNormalizedLoaded } from './types'// 导出 useRouterexport function useRouter(): Router { // 注入 router Router (key 与 上文的 provide 对应) return inject(routerKey)!}// 导入 useRouteexport function useRoute(): RouteLocationNormalizedLoaded { // 注入 路由对象信息 (key 与 上文的 provide 对应) return inject(routeLocationKey)!}
源码中,useRouter
、 useRoute
通过 inject
注入对象实例,并以单个函数的方式暴露出去。
在应用程序中只需要通过命名导入的方式导入即可使用。
import { useRoute, useRouter } from 'vue-next-router'...setup() { const route = useRoute() const router = useRouter() ... // router -> this.$router // route > this.$route router.push('/foo') console.log(route) // 路由对象信息}
除了可以命名导入 useRouter
、 useRoute
之外,还可暴露出很多函数,以更好的支持 tree-shaking
(期待新版本的发布吧)。
NavigationFailureTypeRouterLinkRouterViewcreateMemoryHistorycreateRoutercreateWebHashHistorycreateWebHistoryonBeforeRouteLeaveonBeforeRouteUpdateparseQuerystringifyQueryuseLinkuseRouteuseRouter...
最后
我想,就介绍这么多吧,上文介绍到的只是改进的一部分,感觉还有很多很多东西需要我们去了解和掌握,新版本给我们带来了更灵活的编程,让我们共同期待 vue 3.0 到到来吧。
参考:
- vue-router - https://router.vuejs.org/
- vue - https://cn.vuejs.org
- vue-next-router - https://github.com/vuejs/vue-...
- rfcs - https://github.com/vuejs/rfcs
发表评论 (审核通过后显示评论):