Vue 2.0 Hello World

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>

<div id="app">
  <ul>
    <li><router-link :to="'/'">Home</router-link></li>
    <li><router-link :to="'/all/cat1'">* Cat</router-link></li>
    <li><router-link :to="'/all/something/p'">* Prod</router-link></li>
    <li><router-link :to="'/all2/cat1'">* Cat2</router-link></li>
    <li><router-link :to="'/all2/something/p'">* Prod2</router-link></li>
    <li><router-link :to="'/slug/cat1'">1 Cat</router-link></li>
    <li><router-link :to="'/slug/something/p'">1 Prod</router-link></li>
  </ul>
  <p>
    <router-view></router-view>
  </p>
  
</div>

CSS

ul,p {
  clear: both;
}

li {
  float: left;
  list-style-type: none;
  margin: 5px;
}

JavaScript

Vue.use(VueRouter)

let router = new VueRouter({
  mode: 'history',
  base: '/',
  fallback: false,
  routes: [{
  	path: '/',
    component: { template: '<div>home</div>' }
  },{
    path: '/all/*',
    name: 'all',
    component: { template: `<div>all cat</div>` },
  },{
    path: '/all/*/p',
    name: 'all-p',
    component: { template: `<div>all prod</div>` }
  },{
    path: '/all2/*',
    name: 'all2',
    component: { template: `<div>all cat2</div>` },
    children: [{
  	  path: 'p',
    	name: 'all2-p',
    	component: { template: `<div>all prod2</div>` }
  	}]
  },{
    path: '/slug/:slug',
    name: 'slug',
    component: { template: `<div>slug cat</div>` },
  },{
    path: '/slug/:slug/p',
    name: 'slug-p',
    component: { template: `<div>slug prod</div>` }
  }]
});

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