October 30th, 2017
Dynamic module importing is one of the latest JavaScript features to hit the major browsers. In this article I'll demonstrate how you can build a lazy-load router with Vue.js ...
vue.js components vue-router javascript chrome web performance
Vue Router 4 is currently in beta. Let's take a look at a few of the cool features coming in this new version.
Table of contents:
Vue 3 has introduced the createApp
API which changes the way plugins are added to a Vue instance. For this reason, past versions of Vue Router will not be compatible with Vue 3.
Vue Router 4 introduces the createRouter
API that creates an instance of the router that is installable with Vue 3.
src/router/index.js
import { createRouter } from "vue-router";
export default createRouter({
routes: [...],
});
src/main.js
import { createApp } from "vue";
import router from "./router";
const app = createApp({});
app.use(router);
app.mount("#app");
In previous versions of Vue Router, you've had the option to select a "mode" of navigation simulation.
hash
mode uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes. history
mode utilizes the HTML5 History API to achieve URL navigation without a page reload.
src/router/index.js
// Vue Router 3
const router = new VueRouter({
mode: "history",
routes: [...]
});
In Vue Router 4, these modes have been abstracted into modules that can be imported and assigned to the new history
option. This additional flexibility will allow you to customize your router history implementation if you need to.
src/router/index.js
// Vue Router 4
import { createRouter, createWebHistory } from "vue-router";
export default createRouter({
history: createWebHistory(),
routes: [],
});
Vue Router 4 will allow you to add dynamic routes while the router is running with the new .addRoute
method.
This is probably not a feature you'd use every day, but it does have some interesting use cases. For example, say you're creating a UI for a filesystem app and you want to add paths on the fly. Here how you might do that:
src/components/FileUploader.vue
methods: {
uploadComplete (id) {
router.addRoute({
path: `/uploads/${id}`,
name: `upload-${id}`,
component: FileInfo
});
}
}
You can also use these related methods:
removeRoute
hasRoute
getRoutes
Read more in the Dynamic Routing RFC.
Navigation guards are hooks for Vue Router that allow users to run custom logic before or after navigation events e.g. beforeEach
, beforeRouterEnter
, etc.
They're often used to check if a user has access to a certain page, to validate a dynamic route parameter, or to destroy listeners.
Once the custom logic has run, the next
callback is used to confirm the route, declare an error, or redirect.
In version 4, you can return a value or Promise from the hook instead. This will allow for handy shorthands like the following:
// Vue Router 3
router.beforeEach((to, from, next) => {
if (!isAuthenticated) {
next(false);
}
else {
next();
}
})
// Vue Router 4
router.beforeEach(() => isAuthenticated);
Read more about this in the Async Navigation Guards RFC.
These are just a few of the new features being added in version 4. You can learn more in the Vue Router Next repo.
Thanks to Eduardo and team for your great effort on Vue Router 4!
Click to load comments...