vue-router example for queries

Example showing how to keep up to date with query values

by Niklesh

HTML

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

<div id="app">
 <router-link to="/">Root</router-link> |
 <router-link to="/index">Index</router-link> |
 <router-link to="/panda">Panda</router-link> |
 <router-link to="/http404">http404</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const http404 = { 
	template: '<div>http404 path route : {{$route.path}}, router : {{$router.history.current.path}}</div>',
  mounted(){
    console.log(this.$router);
  }
}
const index = { 
	template: '<div>index path route : {{$route.path}}, router : {{$router.history.current.path}}</div>',
  mounted(){
    console.log(this.$router.history.current.path);
  }
}
const panda = { 
  template: '<div>panda path route : {{$route.path}}, router : {{$router.history.current.path}}</div>',
  mounted(){
     console.log(this.$router.path);
  }
}

const router = new VueRouter({
  mode: 'history',
  routes: [
  		{
        path: "/",
        name: "root",
        redirect: '/index'
      },
      {
        path: "/index",
        name: "index",
        component: index
      },
      {
        path: "/panda",
        name: "panda",
        component: panda
      },
      //...
      {
        path: "**",
        name: "http404",
        component: http404
      }
    ]
})

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