vue-router 2 template

Template for vue-router 2

by lid0

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
 

  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>
  <router-link to="/foo?cat=a">/foo ?cat=1</router-link>
  <router-link to="/foo?cat=b">/foo ?cat=2</router-link>
  <p>
  <router-view></router-view>
   <b>{{msg}}</b>
  </p>
  
</div>

CSS

a {
 color:#000;
 display:inline-block;
 padding:10px;
 margin:5px;
 background:#cfcfcf
}

JavaScript

const Home = { template: '<div>Home Route</div>' }
const Foo = { template: '<div>Foo Route</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/foo', component: Foo }
  ]
})

new Vue({
	router,
  el: '#app',
  data: {
    msg: 'hello'
  },
  methods: {
     updateFromRoute(){
       if(this.$route.path == "/foo"){
        switch (this.$route.query.cat){
           case 'a':this.msg = "selected cat A"; break;
           case 'b':this.msg = "selected cat B"; break;
           case undefined: this.msg = "no cat selected"; break;
        }
     } else if(this.$route.path == "/"){
        this.msg = "Home sweet home"
     }
     }
  },
  watch:{
  "$route.query.cat" :function(a,b){ 
     this.updateFromRoute()
  },
  "$route.path": function(a,b){
  	this.updateFromRoute()
  }
  }
})