Vuejs Router

Vuejs Router

Mar 29, 2019 / Moody Developer

vue-router is the official router package for vue.js. It deeply integrates with the vue.js to easily make single page application(SPA).

Features include:

  • Nested route/view mapping
  • Modular, component-based router configuration
  • Route params, query, wildcards
  • View transition effects powered by Vue.js' transition system
  • Fine-grained navigation control
  • Links with automatic active CSS classes
  • HTML5 history mode or hash mode, with auto-fallback in IE9
  • Customizable Scroll Behavior

Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example:

HTML for router component:

<router-view></router-view>

JavaScript code:

// 0. If using a module system (e.g. via vue-cli), import Vue and VueRouter
// and then call `Vue.use(VueRouter)`.

// 1. Define route components.
// These can be imported from other files
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. Define some routes
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// `Vue.extend()`, or just a component options object.
// We'll talk about nested routes later.
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
  routes // short for `routes: routes`
})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router
}).$mount('#app')

// Now the app has started!

Since we have injected the router now we have access to router throughout the application like this.$router

Here is the complete documentation about everything related to vue-router.


Similar Articles

Auto import components in NuxtJS

Auto import components in NuxtJS

Auto import all your components within NuxtJS which makes code much cleaner & less hastle.
Read more...
Use Chart.js in NuxtJS applications

Use Chart.js in NuxtJS applications

Using chart.js within your NuxtJs(VueJs) application is easy like piece of cake
Read more...