Step: 1 Create one project.
Create one project.
mkdir VueRoute
Go to that project and create one file called package.json. Then, copy the following code into the package.json file.
{
"name": "vuerouter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-runtime": "^6.25.0",
"vue-loader": "^13.0.2",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"dependencies": {
"vue": "^2.4.2",
"vue-router": "^2.7.0"
}
}
Now, you need to install Node.js to work on this project. So after copying the code. Type in the terminal the following command.
npm install
It will install all the dependencies regarding Vue.js, vue-router, Webpack, ES6, and Babel.
Step 2: Make a webpack.config.js file.
The next step would be to configure our webpack.config.js file. Create one file in a root called webpack.config.js. Put the following code in that file.
// webpack.config.js
module.exports = {
// This is the "main" file which should include all other modules
entry: './src/main.js',
// Where should the compiled file go?
output: {
filename: 'bundle.js'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
// Special compilation rules
loaders: [
{
// Ask webpack to check: If this file ends with .js, then apply some transforms
test: /\.js$/,
// Transform it with babel
loader: 'babel-loader',
// don't transform node_modules folder (which don't need to be compiled)
exclude: /node_modules/
},
{
// Ask webpack to check: If this file ends with .vue, then apply some transforms
test: /\.vue$/,
// don't transform node_modules folder (which don't need to be compiled)
exclude: /(node_modules|bower_components)/,
// Transform it with vue
use: {
loader: 'vue-loader'
}
}
]
},
devServer: {
port: 3000
}
}
Create one src folder, and in that, create one file called main.js. This file would be compiled, and with webpack, it becomes bundle.js.
Now create one file called in a root called index.html and put the following code in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Routes</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
Here, I have included the final JavaScript file called bundle.js.
Step 3: Make a components directory.
In the src folder, create another directory called components. We are saving all of our components files here. First, our main.js file will register all of our components, and then we will compile this file via webpack.
The first component would be Home.vue. So create Home.vue inside components.
<template>
<h1>Home</h1>
</template>
<script>
export default {
}
</script>
The second would be About.vue
// About.vue
<template>
<h1>About us</h1>
</template>
<script>
export default {
}
</script>
A third will be Contact.vue
// Contact.vue
<template>
<h1>Contact us</h1>
</template>
<script>
export default {
}
</script>
Step 4: Config vue-router module.
In the main.js file, we first need to import a vue-router module from a node_modules folder because we have installed all our dependencies in this project. So, please copy the following code into our main.js file.
// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact }
]
})
new Vue({
router,
template: `
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/about">About</router-link></li>
<li><router-link to="/contact">Contact</router-link></li>
</ul>
<router-view></router-view>
</div>
`
}).$mount('#app')
I will describe every step in this file.
- First, I imported the vue-router and other required components to run this application.
- Created on the vue-router instance and passed the configurable object in it.
- It created a routes array to define the URI pattern and its related components.
- Also, create a router-view element to show the data related to specific routes.
- Finally, I created a VueJS instance and passed the router object, the main template, which will mount in our app id.
Now, run the following command in your terminal.
npm start
It will start the webpack server. Generally, the port is 8080, but I have changed it to 3000 in the webpack.config.js file. Go to the following URL: http://localhost:3000
If you click the about, the underlying component will be called and rendered via <router-view><router-view> elements.
And your URL will be http://localhost:3000/about.
There are so many other examples you can follow in this URL.
https://github.com/vuejs/vue-router/tree/dev/examples
You can find this how to use vue-router in the VueJS project in the following Github URL
https://github.com/KrunalLathiya/VueRouter
Please comment below if you still have any doubts; I am happy to help you.
it’s good
Thanks man
hey first thanks for all this great tuto ,
and i face this problem and i don’t know what is that mean “Cannot GET /about”
Becase you don’t have route for it. You reload page it is not found route. You have learn more about serve side rendering (Learn vuejs + php…)
yo
Hi – I have been searching high and low for an answer to whether or not vue-router with “history” can work on serverless deployments? Since very article I’ve reviewed thus far indicates server settings are necessary, i’m guessing no, but wondered why such an important feature wouldn’t be supported for serverless deployments (e.g. lambda s3 public bucket hosting)
Hello Mr. Krunal
This is the best help I have seen on VueRouter
specially this line: Vue.use(VueRouter)
Thank you so much.