Vue History Mode Routing: Everything You Need to Know

Vue History Mode Routing

The default mode for the vue-router is hash(#) mode, as it uses the URL hash to simulate a full URL so that the page won’t be reloaded when the URL changes.

To get rid of the hash mode, we can use the router’s history mode, which leverages the history.pushState API to achieve URL navigation without a page reload.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

When using history mode, the URL will look “normal,” e.g., https://appdividend.com/category/vuejs. Beautiful!

Step 1: Install Vue.js

Hit the following command to install Vue CLI. Skip this step if you have installed Vue CLI.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Now create a new Vue.js project using the following command.

vue create history

Step 2: Install Vue Router.

Install vue-router using the following command.

yarn add vue-router

# or

npm install vue-router --save

Now, configure the router inside src >> main.js file.

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.config.productionTip = false
const routes = [];

const router = new VueRouter({ mode: 'history', routes: routes });

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

Here, we have passed two parameters while instantiating the VueRouter object.

1. mode
2. routes array

If we do not define any mode, then by default, it is a hash mode. But we have explicitly specified the mode, and that is history mode.

Okay, now we need to define the routes array. For that, we need to create some components.

Step 3: Install Bootstrap.

Type the following command to install Bootstrap 4.

yarn add bootstrap

# or

npm install bootstrap --save

Add the bootstrap file inside App.vue file.

App.vue

...
import 'bootstrap/dist/css/bootstrap.min.css';
...

Step 4: Create components.

Inside the components folder, create three components.

1. HomeComponent.vue
2. DashboardComponent.vue
3. PostComponent.vue

// HomeComponent.vue

<template>
    <p>This is Home Component</p>
</template>
<script>
export default {
    
}
</script>

// DashboardComponent.vue

<template>
    <p>This is Dashboard Component</p>
</template>
<script>
export default {
    
}
</script>

// PostComponent.vue

<template>
    <p>This is Post Component</p>
</template>
<script>
export default {
    
}
</script>

Step 5: Import all the components inside the main.js file.

We need to import all the components inside the main.js file because we need these components to create an array and assign the different routes.

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import HomeComponent from './components/HomeComponent.vue'
import DashboardComponent from './components/DashboardComponent.vue'
import PostComponent from './components/PostComponent.vue'

import 'bootstrap/dist/css/bootstrap.min.css';

Vue.config.productionTip = false

const routes = [
  { path: 'home', name: 'Home', component: HomeComponent },
  { path: 'post', name: 'Post', component: PostComponent },
  { path: 'dashboard', name: 'Dashboard', component: DashboardComponent },
];

const router = new VueRouter({ mode: 'history', routes: routes });

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

So, here we have assigned each component to path and name. Now we have registered the components with routes successfully.

Add the following code inside App.vue file.

// App.vue

<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm bg-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link :to="{ name: 'Home' }" class="nav-link">Home</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'Dashboard' }" class="nav-link">Dashboard</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'Post' }" class="nav-link">Post</router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

Now start the development server using the following command.

npm run serve

You can see that the history mode of routing is working great. Now, when we directly access the specific route, it will not work. For that, first, you need to check your server if it is either apache or nginx.

#Apache

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

#nginx

location / {
  try_files $uri $uri/ /index.html;
}

That’s it for this tutorial.