Vue.js in depth

# Routing

Vue applications are mostly Single Page Applications (SPA). The server always serves a single HTML page, and navigation between the application pages/sections is managed on the client side in JavaScript. This approach allows smoother transitions between pages, and reduces the number of server calls needed to navigate between pages. This is essential for Progressive Web Apps or web applications that want to have offline features.

The routing of a SPA is therefore managed on the client side, and the Vue team provides a library for this purpose: vue-router. This router allows you to associate routes (URLs) with Vue components, and offers many features:

  • Routes tree configuration
  • Modular configuration based on components
  • Dynamic parameters handling: path, query, wildcards...
  • Integration with Vue transitions system
  • Two modes:
    • by hash (mywebsite.com/#/page1)
    • by history (handle browser history in JS) with auto-fallback for IE

# Installation

If you did not install it during initial project configuration with Vue-CLI, you can add vue-router now with the vue add router command.

The main.js file will be modified to declare this new router in the application:






 


import router from "./router";

new Vue({
  render: h => h(App),
  store,
  router
}).$mount("#app");

# Router Configuration

The router is created by taking a list of routes as parameters. Each route associates a URL pattern with a certain component. When the page loads, or when the URL changes, the router will resolve which route is associated with this new URL.

/** src/router.js **/
import Router from "vue-router";
import Vue from "vue";

import HelloWorld from "@/components/HelloWorld";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/hello/:name",
      name: "hello",
      component: HelloWorld
    }
  ]
});

Once the route resolution is complete, a component has been associated with the current URL. This component is then injected in place of the <router-view /> element. This element is usually placed in the root component App.vue. The elements around <router-view /> form the layout structuring your application: a header, a navigation bar, a footer etc.

<template>
  <div class="app">
    <header><h1>My website</h1></header>
    <router-view />
    <footer>Made with Vue</footer>
  </div>
</template>

Vue-router includes a globally declared <router-link> component, which can substitute <a> tags for any internal navigation done via this router.

The advantage of this component over traditional <a> tags is that the links will always match your configuration (hash or history) and can be static or dynamically generated by route names and parameter lists:

<router-link to="/home">Homepage</router-link>
<router-link :to="{ name: 'hello', params: { name: 'John' } }">
  Dynamic link
</router-link>

Vue-router also brings methods to all components to programmatically navigate between pages:

this.$router.go(-1); // go to previous page

let nextId = this.$route.params.id + 1; // get URL path param
this.$router.push(`/article/${nextId}`); // navigate to a new page by URL

# Practical Work: Implementing the router

  1. If not already done, install vue-router on your project with the vue add router command. Then open the src/router.js file to see how the routes are declared.

WARNING

Warning , the content of App.vue will be partially overwritten with this command, you should save its contents before running the command!

  1. Add a /login route linked to theLoginForm view and a /search route linked to SearchFilm.

TIP

By convention, we call the components linked to routes views, and we usually place them in the folder src/views rather thansrc/components.

  1. Using vue-router documentation, replace the switch between LoginForm andSearchFilm currently based on a v-if by a navigation from one route to another.

  2. Bonus: Using vue-router Navigation Guards de vue-router, redirect the user who wants to access the film search page to /login if he is not authenticated.

← HTTP Requests →