标签：传参 定时器 裁剪 vue 跳转 组件 路由

vue编程式跳转，定时器使用，裁剪公共组件，路由传参

• vue编程式跳转
• 裁剪公共组件
• 路由跳转定时器清除
• 路由传参

vue编程式跳转

语法： this . $ router.push({path:’/’})

路由跳转除了在template编写router-link外，也可以在js使用$route.push编程跳转

裁剪公共组件

在vue中公共组件一般放在app.vue中，比如导航栏。。。
在路由跳转时，使用v-show或v-if条件渲染指令来对公共组件进行裁剪
原理：在app.vue中监听$route变换，获取跳转信息

mounted (){
if (this.$route.path == ‘/about’){
this.headershow = false
}
},//mounted是刷新时也进行裁剪
watch:{
$route(to,from){
if(to.path == ‘/tab’ || to.path == ‘/about’){
this.headershow = false
}else{
this.headershow = true
}
}
}

路由跳转定时器清除

定时器用完后不清除会一直占用内存，容易造成卡顿
1.在beforeDestroy（）内清除定时器

2.通过$once事件在定义完定时器后的位置来清除

路由传参

路由传参用query来传递参数，所以F5也不会清空

用购物商品详情页举例

1. 新建商品详情组件 goodInfo.vue
   
2. 配置路由（router/index.js）
   
   
   ![在这里插入图片描述](https://www.icode9.com/i/ll/?i=20190625202551307.png
3. 给a链接加点击事件
   
4. 在methods选项通过query传参
   
5. 在详情页接受参数并渲染
   

标签：传参,定时器,裁剪,vue,跳转,组件,路由
来源： https://blog.csdn.net/crazyFengGan/article/details/93653244

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。