Getting Started with Vue Router with Vue 3

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Vue 3 is in beta and it’s subject to change.

To build a single page app easily, we got to add routing so that URLs will be mapped to components that are rendered.

In this article, we’ll look at how to use Vue Router 4 with Vue 3.

Getting Started

To get started, we can create our app by including the scripts and accessing the required methods within the VueRouter object.

For example, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4.0.0-beta.7/dist/vue-router.global.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      <p>
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <router-view></router-view>
    </div>
    <script>
      const Foo = { template: "<div>foo</div>" };
      const Bar = { template: "<div>bar</div>" };

      const routes = [
        { path: "/foo", component: Foo },
        { path: "/bar", component: Bar }
      ];

      const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes
      });

      const app = Vue.createApp({});
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>

We have the script tags for Vue 3 and Vue Router 4 in the head tag.

In the body , we have the div with ID app to hold the template.

The router-link and router-view components are used for the links and the router view respectively.

Then we call VueRouter.createRouter to create the router and pass in the route.

The VueRouter.createWebHistory method turns on history mode to let us use URLs without the hash sign.

Then we call createApp to create our app.

And we include the router with app.use .

Then finally we mount the app.

Now we can click on the links and see the corresponding component’s content.

The routes have the path and component properties to map the path to the components.

We can access the router data with the this.$router.currentRouter.value.params property.

For instance, we can write:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4.0.0-beta.7/dist/vue-router.global.js"></script>
    <title>App</title>
  </head>
  <body>
    <div id="app">
      <p>
        <router-link to="/foo/1">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <p>{{id}}</p>
      <router-view></router-view>
    </div>
    <script>
      const Foo = { template: "<div>foo</div>" };
      const Bar = { template: "<div>bar</div>" };

      const routes = [
        { path: "/foo/:id", component: Foo },
        { path: "/bar", component: Bar }
      ];

      const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes
      });

      const app = Vue.createApp({
        computed: {
          id() {
            return (
              this.$router.currentRoute.value.params &&
              this.$router.currentRoute.value.params.id
            );
          }
        }
      });
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>

We have the /foo/1 URL in the router link.

The :id is the placeholder for the URL parameter called id .

We can get the value of it with the this.$router.current.value.params object.

This has all the URL parameter keys and values.

Conclusion

We can add basic routes with Vue Router 4 with Vue 3.