Vue Router 4–Route Props and History Mode
Tags: webdev, programming, javascript, vue
Published: 2021-01-25 23:28:37

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

### Route Props Object Mode

We can set the `props` property of the routes to accept props.

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>
      </p>
      <router-view></router-view>
    </div>
    <script>
      const Foo = {
        template: "<div>foo</div>"
      };
      const Bar = {
        template: "<div>bar {{id}}</div>",
        props: ["id"]
      };
      const routes = [
        {
          path: "/foo",
          component: Foo
        },
        {
          path: "/bar",
          component: Bar,
          props: { id: 1 }
        }
      ];
      const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes
      });
      const app = Vue.createApp({});
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>
```

We have the `props` property in the `routes` entry with an object:

```
{ id: 1 }
```

The `id` prop is passed in automatically if we navigate to `/bar` .

The `router-link` has the `/bar` as the value of the `to` attribute.

And when we click on the `bar` link, we see `bar 1` displayed.

The 1 is from the props.

This way of passing route props is useful for static route props.

### Route Props Function Mode

The `props` property can also have a function as its value.

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?id=1">bar</router-link>
      </p>
      <router-view></router-view>
    </div>
    <script>
      const Foo = {
        template: "<div>foo</div>"
      };
      const Bar = {
        template: "<div>bar {{id}}</div>",
        props: ["id"]
      };
      const routes = [
        {
          path: "/foo",
          component: Foo
        },
        {
          path: "/bar",
          component: Bar,
          props: (route) => ({ id: route.query.id })
        }
      ];
      const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes
      });
      const app = Vue.createApp({});
      app.use(router);
      app.mount("#app");
    </script>
  </body>
</html>
```

We have a function that takes the `route` object as the parameter.

And we get the query parameter from the `query` property.

We just return an object with the key being the key of the query parameter.

The value is the query parameter value.

The `router-link` for the `/bar` route has the `id` query parameter.

Now when we click on the `bar` link, we see `bar 1` displayed.

### HTML5 History Mode

Hash mode is the default way of mapping routes.

It uses the URL to simulate a full URL so that the page won’t be reloaded when the URL changes.

With history mode, we remove the hash sign so that the URL looks like any other URL we see.

To make HTML5 mode work with various servers, we may have to configure it so that the browser stays in the app when we go to a different URL.

For example, in Apache, we write:

```
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
```

to make all URL maps to `index.html` so that `index.html` of our Vue app is loaded when any request is made.

### Conclusion

We can pass route props in various ways with Vue Router 4.

If we use history mode with our Vue 3 app, then we may have to configure our web server to go to our app when any request is made.