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://img-blog.csdnimg.cn/20190625202551307.png
3. 给a链接加点击事件
   
4. 在methods选项通过query传参
   
5. 在详情页接受参数并渲染