In this article we will see how to create vue application with Vue CLI
1 First you install the VUE CLI in your computer. If you already have installed you can skip this step
npm install -g @vue/cli # OR yarn global add @vue/cli
2 Then you can create the vue project named vue-routing-example
vue create vue-routing-example
After creating the project you can check whether your project running properly. Use the following command in your terminal
npm run serve
Then you can open the URL http://localhost:8080/ on your browser. Make sure your project is working properly
3 you can use following command to install the vue-router in your app
npm install vue-router --save
4 Now you have to add some code to main.js
file to work routing
import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router' Vue.config.productionTip = false Vue.use(VueRouter) const routes = [ ]; const router = new VueRouter({ mode: 'history', routes: routes }); new Vue({ router, render: h => h(App), }).$mount('#app')
5 Now you can create the About.vue and Home.vue components
Your About.vue file will have the following code
I am at About
Your Home.vue file will have the following code
I am at Home
6 Now you can the following code to main.js to configure the routing of your application
const routes = [ { path:'/home', component: Home }, { path:'/about', component: About } ];
7 Now you can add the following code to App.vue to work routing
Now you check with following URLs
http://localhost:8080/home
http://localhost:8080/about