Simple Vue router example

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.2.0/vue-router.js"></script>
<div id="app">
  <router-link to="/">home</router-link>
  <router-link to="/about">about</router-link>
  <router-link to="/something">no route</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const NotfoundComponent = {
	template: '<h1>Not found</h1>'
};

const HomeComponent = {
	template: '<h1>Home</h1>'
};

const AboutComponent = {
	template: '<h1>About</h1>'
};

const routes = [
	{
  	path: '/',
  	component: HomeComponent
  },
  {
  	path: '/about',
  	component: AboutComponent
  },
  {
  	path: '*',
    component: NotfoundComponent
  }
];

const router = new VueRouter({
	routes
});

new Vue({
	el: '#app',
	router
});