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

From the first part, we've been talking about some significant changes in the new Vue router version, let's continue to dive into more improvements 🚀

![dive](https://media2.giphy.com/media/SiKqNZqksVYWmQEMjd/giphy.gif?cid=ecf05e47c410865939273dabd7f8fdc6fd2ca27cf8d54927&rid=giphy.gif)


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.

# Major improvement

### 6. If you use `<transition>`, you may need to wait for the router to be ready before mounting the application.
```js
app.use(router)
// Note: on Server Side, you need to manually push the initial location
router.isReady().then(() => app.mount('#app'))
```
Usually, `<transition>` can also be used for normal mounting, but now the navigation is asynchronous. If there is a route guard when the route is initialized, an initial rendering transition will appear before resolve, just like `<transiton>` provide an [appear](https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render) as well.

### 7. On SSR, you need to manually pass the appropriate history by using a ternary.
```js
let history = isServer ? createMemoryHistory() : createWebHistory()
let router = createRouter({ routes, history })
// on server only
router.push(req.url) // request url
router.isReady().then(() => {
  // resolve the request
})
```

### 8. When you `push` or `resolve` a named route that does not exist, an error will be raised instead of navigating to the root route `"/"` and displaying nothing.

In vue2-router, when a `push` that does not exist, the route will navigate to the root route `"/"` and nothing will be rendered.
```js
//vue2-router
const router = new VueRouter({
  mode: 'history',
  routes: [{ path: '/', name: 'foo', component: Foo }]
}
this.$router.push({name: 'baz'})
```
The browser console will only prompt the following warning, and url will jump to the root route `"/"`.

![vue-warn](https://i.postimg.cc/HnRBS8QV/vuerouter.png)

In vue-router-next, the same approach will cause an error.

```js
const router = createRouter({
  history: routerHistory(),
  routes: [{ path: '/', name: 'foo', component: Foo }]
})
...
import { useRouter } from 'vue-next-router'
...
const router = userRouter()
router.push({name: 'baz'})) // this will raise an error
```
The error in the browser.
![vue-next](https://i.postimg.cc/630QLdxf/vue-2.png)

### 9. Empty children `path` no longer append trailing slashes (/) to make them consistent across all routes:

- By default, no route has a slash, but it can also have a trailing slash.

- Add `strict: true` to a route record or to the router options (along routes) will prohibit an optional trailing slash

- In combination with the trailing slash in your routes allows you to enforce a trailing slash in your routes. For nested routes, make sure to add a trailing slash at the end of the parent:

```js
let routes = [
  {
    path: '/parent/',
    children: [{ path: '' }, { path: 'child1/' }, { path: 'child2/' }],
  },
]
```

- To redirect the user to the trailing slash route (or vice versa), you can set a `beforeEach` navigation protection to ensure the presence of the trailing slash.

- Because of that, relative children path redirect on an empty path are not supported anymore. We can use named routes instead:
```js
// vue2-route
let routes = [
  {
    path: '/parent',
    children: [{ path: '', redirect: 'home' }, { path: 'home' }],
  },
]
// vue-router-next
let routes = [
  {
    path: '/parent',
    children: [
      { path: '', redirect: { name: 'home' } },
      { path: 'home', name: 'home' },
    ],
  },
]
```

Note this will work if `path` was `/parent/` as the relative location `home` to `/parent/` is indeed `/parent/home` but the relative location of `home` to `/parent` is `/home`

That's it for now. I hope this helps you have a brief understanding of the new Vue router version. If there is something missing in the article, please let me know or leave a comment. 😊🙇‍♀️ 

Apart from the improvement the new version brings, I feel that there are still many things that we need to understand and master. The new version has been bringing us more flexible in programming. Let's look forward to Vue.js 3.0 together!🎉


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