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.
- HomeComponent
- DashboardComponent
- 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(#).

Brijpal Sharma is a web developer with a passion for writing tech tutorials. Learn JavaScript and other web development technology.