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

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 🚀

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.

Major improvement

6. If you use <transition>, you may need to wait for the router to be ready before mounting the application.

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 as well.

7. On SSR, you need to manually pass the appropriate history by using a ternary.

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.

//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 "/".

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

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.

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:
  

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:
  

// 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