vue-router编程式导航

<template>
  <div>
    <!-- <router-link to="/">HOME</router-link>
    <router-link to="/aboutview">ABOUT</router-link> -->
    <a href="javascript:;" @click='toHome'>HOME</a> |
    <a href="javascript:;" @click='toAbout'>ABOUT</a>
    <router-view></router-view>
  </div>
</template>

<script>
	export default {
		name: 'App',
		methods: {
			/* 第一种
			toHome() {
              this.$router.push('/')
			},
			toAbout() {
               this.$router.push('/aboutview')
			} */
			
			/* 第二种 */
			/* toHome() {
			  this.$router.push({path:'/'})
			},
			toAbout() {
			   this.$router.push({path:'/aboutview'})
			} */
			
             /* 第3种 */
			toHome() {
			  this.$router.push({name:'HomeView'})
			},
			toAbout() {
			   this.$router.push({name:'AboutView'})
			} 
		}
	}
</script>

编程式导航点击时会有一些错误，需要改写push方法（index.js中改）

//获取原型对象上的push方法
const originalPush = VueRouter.prototype.push
// console.log(originalPush);
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}