vue-处理重复跳转报错问题

一、components

   About.vue
   
  <template>
      <h2>我是About的内容</h2>
  </template>
  <script>
        export default{
        name:'About'
  }
  <script/>
  
   Home.vue
   
   <template>
         <h2>我是Home的内容</h2>
   </template>
   
    <script>
	     export default{
	     name:'Home'
	}
	</script>
   
   router
       index.js
	   //该文件主要用于：创建路由器定制路由规则
	   import Vue from 'vue'
	   import VueRouter from 'vue-router'
	   import About from '../components/About'
	   import Home from '../components/Home'
	   
	   //使用插件
	   Vue.use(VueRouter)
	   
	   //第一步：将原始的push保存一份
	   const originPush=VueRouter.prototype.push
	   const originReplace=VueRouter.prototype.replace
	   //第二步：将VueRoute.prototype.push做增强
	   VueRouter.prototype.push=function(location,okCallback,errCallback){
	   //使用push 的人没有传递：成功的传递，失败的回调
	   if（okCallback===undefined && errCallback ===undefined）{
	   ruturn originPush.call(this.localtion).catch((=>{}))
	   }else{
	   return originPush.call(this,location,okCallback,errCallback)
	   }
	   }
	   //第三步：将VueRouter.prototype.replace做增强
	   VueRoute.prototype.repllce=funtion(location,okCallback,errCaback){
	   //若使用push的人没有传递：成功的回调，失败的回调
	   if(okCallback===undefined && errCallback===undefined){
	   return originReplace.call(this,location).catch(()=>{})
	   }else{
	   return originReplace.call(this,location,okCallback,errCallback)
	   }
	   }
	   
	   //创建路由器，并定制路由规则
	   const router=new VueRouter({
	   routes:[//该数组用于存放一组一组的路由规则
	   {
	   path:'/about',//路径
	   conponent:About//组件
	   },
	   {
	   path:'/home',//路径
	   componetns:Home//组件
	   }
	   ]
	   })
	   //暴露路由
	   export default router
	   
	   }
	   
      App.vue
	     <template>
		 <div>
		 <div class="page-header col-xs-offset-2 col-xs-8">
		 <h2>Vue路由测试</h2>
		 </div>
		 //导航区域
		 <div class="col-xs-2 col-xs-offset-2">
		 //在原生html中，我们靠a标签实现：页面切换
		 //<a class="list-group-item active" href="./about.html">About</a>
		 //在vue中，我们靠router-link标签实现：点击导航修改路径
		 <button @click="button">点击到home</button>
		 <router-link class="list-groupo-item" to="/about">About</router-link>
		 <router-link class="list-group-item" to="/home">Home</router-link>
		 </div>
		 //展示区
		 <div class="col-xs-6 panel-body">
		 //指定展示的位置
		 <router-view/>
		 </div></div>
		 </template>
		 <script>
		 export default{
		 name:'App',
		 methods:{
		   toHome(){
		   this.$router.replace('/home')
		   }
		 }
		 }
		 </script>
		 
		 main.js
		     import Vue from 'vue'
			 import App from './App'
			 import router from './router'
			 Vue.config.productionTip=false
			 new Vue({
			 el:'#app',
			 render:h=>h(App),
			   router
			 
			 })