All you need to know in the next vue-router (part.I)

Vue Router is the official router for Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build Single Page Applications.

The source code version based on this article is vue-router-next alpha.12. In order to distinguish it from Vue Router in Vue.js 2.0, vue-router v3.2.0, I'd called vue2-router here for easy reference.

This will be splitting into two parts, and I hope this helps you have a brief understanding of the new version of the Vue router. If there is something missing in the article, please let me know or leave a comment.😊🙇‍♀️

Major improvements

As you may know, the major Vue improvement has brought a series of improvements to the Vue Router as well. The main changes at this stage compared to vue2-router are summarized as follows:

1. Router Construction Options - mode

Changed from the original mode: "history" to history: createWebHistory(). (The same for setting other modes).

// vue2-router
const router = new VueRouter({
  mode: 'history',
  ...
})

// vue-router-next
import { createRouter, createWebHistory } from 'vue-router'
// there is also createWebHashHistory and createMemoryHistory

const router = createRouter({
  history: createWebHistory(),
  ...
})

2. Router Construction Options - base

The first parameter passed to createWebHistory() (and other modes) is used as the base.

//vue2-router
const router = new VueRouter({
  base: __dirname,
})

// vue-router-next
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory('/'),
  ...
})

3. When capturing all routes (/*), you must now be defined using a parameter with a custom regex: /:catchAll(.*).

// vue2-router
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/user/:a*' },
  ],
})


// vue-router-next
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:a:catchAll(.*)', component: component },
  ],
})

When the route is /user/a/b, the captured params are {"a": "a", "catchAll": "/b"}.

4. router.match and router.resolve are merged together into router.resolve, but the signature is slightly different.

// vue2-router
...
resolve ( to: RawLocation, current?: Route, append?: boolean) {
  ...
  return {
    location,
    route,
    href,
    normalizedTo: location,
    resolved: route
  }
}

// vue-router-next
...
function 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,
  }
}

5. Remove router.getMatchedComponents, which can be obtained from router.currentRoute.value.matched.

router.getMatchedComponents returns the target location or the array of components that the current route matches (definition/construction class of the array, not an instance). Typically used when the server-side rendering of data preloading.

router.currentRoute.value.matched
  .map(record => Object.values(record.components))
  .flat()

That's it for the first part. Thank you for reading!
There's more coming in part two 🚀

Referances

vue-router - https://router.vuejs.org/

vue - https://vuejs.org

vue-next-router - https://github.com/vuejs/vue-router-next