VUE 动态路由配置，以及vuerouter生命周期函数失效的问题

VUE 动态路由配置，以及vuerouter生命周期函数失效的问题

如何配置动态路由

在router/index下配置

{
  path:'/user:id',//使用:就可以将id变为动态绑定
  name:'user'
}

遇到的问题

组件会复用，生命周期函数不会被重新执行

解决方法

监听路由变化

watch

watch:{
  $route:(to,from)=>{
    console.log(to.$route.params.id)//路由导航时传递的id
  }
}

beforeRouteUpdate

beforeRouteUpdate(to,from,next){
	console.log(to.params.id)//同上
  
  next();//务必使用，不然会路由阻塞
}

总结

只有在组件复用时，导致了声明周期函数失效时，才考虑以上两种方法的任一一种