Vue Router 4–Programmatic Navigation
Tags: vue, webdev, programming, javascript
Published: 2021-01-25 23:27:58

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

### Programmatic Navigation

We can programmatically navigate through routes with Vue Router 4.

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">Foo</router-link>
        <a href="#" @click.stop="go">Bar</a>
      </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({
        methods: {
          go() {
            this.$router.push("bar");
          }
        }
      });
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>
```

We have an `a` element to go to the `bar` route.

The `stop` modifier is added to `@click` to prevent propagation.

In the root Vue instance, we have the `this.$router.push` method to go to the given route.

We can also write:

```
this.$router.push({ path: "bar" });
```

We can do this for named routes:

```
router.push({ name: 'bar', params: { id: '123' } })
```

So 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">Foo</router-link>
        <a href="#" @click.stop="go">Bar</a>
      </p>
      <p>{{ $router.currentRoute.value.params.id }}</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/:id", component: Bar, name: "bar" }
      ];

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

      const app = Vue.createApp({
        methods: {
          go() {
            this.$router.push({ name: "bar", params: { id: "123" }       });
          }
        }
      });
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>
```

We added the `:id` URL parameter placeholder and added the `name` property to it.

So we can call `push` with the `name` value instead of the path.

The URL parameter is in the `id` property.

### `$router.replace(location, onComplete?, onAbort?)`

The `$router.replace` method is like the `$router.push` except that it overwrites the previous history entry.

We can add the `replace` prop to `router-link` like:

```
<router-link :to="..." replace>
```

which is the same as:

```
router.replace(...)
```

### `$router.go(n)`

The `$router.go` method takes a single integer and lets us go how given number of steps forward or backward in the browser history.

A negative integer means we’re going backward.

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">Foo</router-link>
        <router-link to="/bar">Bar</router-link>
        <a href="#" @click.stop="goBack">Back</a>
      </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({
        methods: {
          goBack() {
            this.$router.go(-1);
          }
        }
      });
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>
```

We have the `goBack` method with the `this.$router.go` call to go back to the previous route.

The convention of the method follows the History API.

### Conclusion

We can navigate to different routes programmatically with Vue Router 4, which works with Vue 3.