vue-router参数变化更新页面问题

vue-router参数变化更新页面问题

我们在做项目的过程中经常会用到路由的模式匹配，例如对于不同的用户所使用的组件相同，我们不必为每个用户设置一个路径。此时，动态路径参数就能帮助我们达到这个效果。

相信下面的代码你一定见过

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

这样写不管是’/user/123’还是’/user/111’都会被匹配到，接着就会渲染User模板，这里的User可以引用自其它模块也可以是在该页面使用template生成的简单的模板。

想要获取页面路径中的参数id也很简单，使用

this.$router.params.id

如果你在页面中声明了router那么this.$router 和 router 使用起来完全一样。，上面的代码可以写成

router.params.id

动态路径参数使用简单方便，但是也要注意一点，如果直接从参数匹配跳转到另一个参数匹配，例如从’/user/123’到’/user/111’组件并不会被销毁，因为他们使用相同的组件，为了提高利用率组件会被复用，不用销毁后重新创建，也就导致了生命周期函数钩子在路径跳转时不会再次被调用。而我们很多初始化的操作会放在mounted函数里面，此时他们就会静静躺着什么也不会做，知道使用其他组件后再次来到该页面。

官方给出的解决方案有两种，如果vue-router版本低于2.2使用watch监听函数监听路由变化

const User = {
  template: '...',