其他分享
首页 > 其他分享> > vue-处理重复跳转报错问题

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
	   
	   }

标签:About,vue,重复,okCallback,转报,VueRouter,push,Home,prototype
来源: https://www.cnblogs.com/zmh114712318/p/16440035.html