vue-router example for queries - JSFiddle

Example showing how to keep up to date with query values

HTML

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

<div id="app">
  <div><router-link to="/Analysis">/Analysis</router-link></div> 
<keep-alive>
  <router-view name="masterPanel"></router-view>
</keep-alive>
<router-view name="detailPanel"></router-view>
</div>

CSS

.router-link-exact-active{
  background-color:red;
}

Babel + JSX

const Analysis = { 
	template: `
  	<div>Analysis {{ i }} <br/>
  		<router-link to="/Analysis/Readiness">/Analysis/Readiness<br/></router-link>
      <br>
      <router-link to="/Analysis/JobErrors">/Analysis/JobErros</router-link>
      <router-view name="optionsPanel"></router-view>
    </div>`,
  data(){
  	return{
    	i : 1
    }
  },
  created:function(){
    var d = new Date();
    this.i = d.getMilliseconds();
  }
}

const Readiness = { 
	template: `<div>Readiness {{ i }} 
  		<router-view></router-view>
    </div>`,
  data(){
  	return{
    	i : 1
    }
  },
  created:function(){
    var d = new Date();
    this.i = d.getMilliseconds();
  }
}



const ChartBar = { 
	template: '<div>ChartBar  {{ i }}</div>',
  data(){
  	return{
    	i : 1
    }
  },
  created:function(){
    var d = new Date();
    this.i = d.getMilliseconds();
  }
}

const ChartBubble = { 
	template: '<div>Chart Bubble  {{ i }}</div>',
  data(){
  	return{
    	i : 1
    }
  },
  created:function(){
    var d = new Date();
    this.i = d.getMilliseconds();
  }
}

const JobErrors = { 
	template: `<div>JobErrors {{ i }} 
  		<div><router-link to="/Analysis/JobErrors/Operations">/Analysis/JobErrors/Operations</router-link></div><br/>
  <div><router-link to="/Analysis/JobErrors/User">/Analysis/JobErrors/User</router-link></div> 
    </div>`,
  data(){
  	return{
    	i : 1
    }
  },
  created:function(){
    var d = new Date();
    this.i = d.getMilliseconds();
  }
}

const Options = { 
template: `
<div>Options  {{ i }}
	 <div><router-link to="/Analysis/Readiness/Group">/Analysis/Readiness/Group</router-link></div><br/>
  <div><router-link to="/Analysis/Readiness/User">/Analysis/Readiness/User</router-link></div> 	
</div>`,
  data(){
  	return{
    	i : 1
    }
  },
  created:function(){
    var d = new Date();
    this.i = d.getMilliseconds();
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/Analysis',
      components: {
        masterPanel:...