Getting Started with Vue Router with Vue 3
Tags: vue, webdev, programming, javascript
Published: 2021-01-25 23:26:56

**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.