AppDividend
Latest Code Tutorials

Vue History Mode Routing Tutorial

1,966

Get real time updates directly on you device, subscribe now.

Vue History Mode Routing Tutorial. 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!

Vue History Mode Routing Tutorial

Now, we install the Vue.js.

#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

 

Vue History Mode Routing Tutorial

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

#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';
...

#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>

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

We need to import all the component inside main.js file because we need to 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.

Related Posts
1 of 15

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 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;
}

 

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.