Vue routing tutorial with mode history

In this post, we learn how to configure a laravel project with Vue routing tutorial with mode history.

Vue routing tutorial with mode history. by default in vuejs mode is hash(#) mode. To remove hash(#) from URL we use history mode in vuejs routing.

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

After add mode: history in the router URL looks normal //www.codermen.com/articles/submit

Routing in vuejs with history mode tutorial

Step:1 Install vuejs 

To install vuejs use this flowing command. (you can skip this installation if you install vuejs CLI)

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

After that, Now create a Vue.js project using the following command.

vue create history

Step:2 Install vuejs routing

After successfully creating a new project install VueJs routing using this following this command

yarn add vue-router

# or

npm install vue-router --save

Now, open src/main.js file and edit.

// 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')

In this code, we use two parameter mode and route array. 

If here we do not define any mode by default it takes a hash(#) but in the project, we use a mode History. 

Next, for better style here we use bootstrap so install bootstrap using this flowing this command.

yarn add bootstrap

# or

npm install bootstrap --save

After successfully install bootstrap import bootstrap file in App.vue file.

App.vue

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

Step:3 Create Component

Create three new component inside the component folder.

1. HomeComponent
2. DashboardComponent
3. NewsComponent

HomeComponent

// HomeComponent.vue

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

DashboardComponent

// DashboardComponent.vue

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

NewsComponent

// NewsComponent.vue

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

Step:4 Import all the components in the main.js file

Now, import all this component in the main.jsfile because we use to these components to assign the different routes and create an array.

// 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 NewsComponent from './components/NewsComponent.vue'

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

Vue.config.productionTip = false

const routes = [
  { path: 'home', name: 'Home', component: HomeComponent },
  { path: 'news', name: 'News', component: NewsComponent },
  { path: 'dashboard', name: 'Dashboard', component: DashboardComponent },
];

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

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

Ok,  we have registered the all components with routes successfully. Now, add the following code inside App.vue file. this is work as a navigation.

 <template>
  <div id="app">
  <nav >
   <ul >
    <li >
     <router-link :to="{ name: 'Home' }" >Home</router-link>
    </li>
    <li >
     <router-link :to="{ name: 'Dashboard' }" >Dashboard</router-link>
    </li>
    <li >
     <router-link :to="{ name: 'News' }" >News</router-link>
    </li>
   </ul>
  </nav>
  <router-view></router-view>
 </div>
 </template>

 <script>

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

After, we start the development server using the following command.

npm run serve

Finally, we complete the Vue routing tutorial with the mode history tutorial, history mode of routing is working great. Now, when we directly access the route without include hash(#).