# Getting Started

Note

You are reading the documentation of Kdu Router 3 for Kdu 2. If you are working with Kdu 3, use the Kdu Router 4 documentation (opens new window) instead.

We will be using ES2015 (opens new window) in the code samples in the guide.

Also, all examples will be using the full version of Kdu to make on-the-fly template compilation possible. See more details here (opens new window).

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

# HTML

<script src="https://unpkg.com/kdu/dist/kdu.js"></script>
<script src="https://unpkg.com/kdu-router/dist/kdu-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

# JavaScript

// 0. If using a module system (e.g. via kdu-cli), import Kdu and KduRouter
// and then call `Kdu.use(KduRouter)`.

// 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
// `Kdu.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 KduRouter({
  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 Kdu({
  router
}).$mount('#app')

// Now the app has started!

By injecting the router, we get access to it as this.$router as well as the current route as this.$route inside of any component:

// Home.kdu
export default {
  computed: {
    username() {
      // We will see what `params` is shortly
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

Throughout the docs, we will often use the router instance. Keep in mind that this.$router is exactly the same as using router. The reason we use this.$router is because we don't want to import the router in every single component that needs to manipulate routing.

Notice that a <router-link> automatically gets the .router-link-active class when its target route is matched. You can learn more about it in its API reference.

← Installation Dynamic Route Matching →