All you need to know in the next vue-router (part.I)
Tags: vue, webdev, javascript
Published: 2020-05-25 06:10:18


> 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](https://github.com/vuejs/vue-router-next). In order to distinguish it from Vue Router in Vue.js 2.0, [vue-router v3.2.0](https://github.com/vuejs/vue-router), 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.😊🙇‍♀️


![memes](https://media3.giphy.com/media/l2JeiyU6hnaF4h9Kw/giphy.gif?cid=ecf05e47c233e15f76fc53165e0c9f41f9f281536167025f&rid=giphy.gif)

# 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).

```js
// 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`.

```js
//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(.*)`.
```js
// 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.
```js
// 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.

```js
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 🚀
 
 
 
<br/>
<br/>
<br/>



###### Referances
###### vue-router - https://router.vuejs.org/
###### vue - https://vuejs.org
###### vue-next-router - https://github.com/vuejs/vue-router-next