vue-router 2 template

Template for vue-router 2

by Sova

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">
  Current path: {{ $route.fullPath }}
  <br>
  <router-view></router-view>
</div>

Babel + JSX

const myParams = {test: 'lffl'};

const Foo = { 
	template: `
  	<div>
  		<button @click="redirect1">Redirect 1</button>
    	<button @click="redirect2">Redirect 2</button>
		</div>
  `,
  
  methods: {
  	redirect1() {
    	const query = Object.assign({},
      	this.$route.query,
        {page: 1}
      );
      
      const params = {...myParams};
      
    	this.$router.push(
      	{name: 'foo', query, params}, 
        () => console.log('redirect1 completed'), 
        () => console.log('redirect1 aborted')
      );
    },
    
    redirect2() {
    	const query = Object.assign({},
      	this.$route.query,
        {page: 2}
      );
      
      const params = {...myParams};
      
    	this.$router.push(
      	{name: 'foo', query, params}, 
        () => console.log('redirect2 completed'), 
        () => console.log('redirect2 aborted')
      );
    },
  }
}

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

new Vue({
	router,
  el: '#app',
  mounted() {
  	this.$router.push('/foo')
  }
})