Learn About Vue Routers

This updated guide examines Learn About Vue Routers and organizes the essential facts, background, and practical takeaways in clear American English.

Today's article will delve into the Vue router. Routing is the way to manage components in Single Page Applications (SPA). All famous front-end frameworks use the concept of Routing.

What is a Vue router?

Vue router is the official router for Vue.js. It integrates deeply with the Vue.js core to help build SPAs with Vue.js easily. Features include:

• Nested route / view mapping
• Configure the router based on components, modules
• Routing parameters, queries, wildcards
• See the transition effects provided by the transition system of Vue.js
• Fine-grained navigation control
• Link to the active CSS class automatically
• HTML5 history mode or hash mode, with auto-fallback in IE9
• Custom scrolling behavior

How to use vue-router

Step 1: Create 3 components inside the Components folder

In the directory, create 3 component files. These files will look like in the following snippet:

// Home.vue

Then create an About.vue file .

// About.vue

Finally, create the Contact.vue file .

// Contact.vue

Step 2: Update the index.html file and add the app id attribute.

Step 3: Configure the vue-router module

In the main.js file, we first need to import the vue-router module from the node_modules directory because we have installed all the dependencies in this project. Copy the following code into main.js.

// 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: `

` }).$mount('#app');

Step 4: Run the code and see the final output

Now, there are 3 items in the Navigation bar and if you click on one of them, the route below will change and you can see the vue-router application in action. The example has included all the main project files here as well ((you can also find this project on Github: https://github.com/KrunalLathiya/playground-UjLAnHRe).

package.json

{ "name": "vuerouter", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --host 0.0.0.0 --disable-host-check" }, "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" } }

webpack.config.js

var path = require('path'); module.exports = { // This is the "main" file which should include all other modules entry: path.join(__dirname,'/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 } }

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: `

` }).$mount('#app');

index.html

Home.vue

About.vue

Contact.vue