![3a936b14031a51a15ca1d32c50a997ee.png](https://i-blog.csdnimg.cn/blog_migrate/cde0f58e2e29033244ba05413177dcb7.jpeg)
前言
《vue 基础》系列是再次回炉 vue 记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)
动态路由
所谓动态路由,就是以冒号 :xxx 来定义地址某部分的路由,通常是基于 Restful 规范,比如下面使用动态的 id 定义的地址:
![ebc60e8884d56bf8492dfb857245111c.png](https://i-blog.csdnimg.cn/blog_migrate/d86d4920a6a0e3e47a193d7b23c1451c.jpeg)
问题
相信经验丰富的你一定遇到过这样的问题:明明地址变了,但组件没有重新进行“刷新”?
我们可以通过 vue 的生命周期来验证组件是否会重新渲染:
![68f342b9c42626c5df99428af194ed24.png](https://i-blog.csdnimg.cn/blog_migrate/c147640e0a8b4264461eaa75f9602e29.jpeg)
当我每次通过 button 触发 changeRouterUrl 方法来进行 id 的累加使得 url 发生变化。但 created 一直没有执行第二次。
![61046a78c87368582e67adf221a3622f.gif](https://i-blog.csdnimg.cn/blog_migrate/76b7b35345d83a3e4cca8c1c1e5f6ab9.gif)
一个简单的 gif
那怎么解决的?
解决
我们知道当定义好 Vue.use(Router); 后,我们就能在实例化后的 vue 中,通过 this.$route 路由对象来获取相关属性了。
知道这点后,就通过 watch 来监听 $route 对象即可。
同时也能用 $route 中对应的 to、from 概念对应上 watch 接受的 newVal、oldVal 两个变化前后的参数。
![c3df02ce85366255014d03ad99e98a73.png](https://i-blog.csdnimg.cn/blog_migrate/48fcfc4bffc8f5da4ea595330377dd38.jpeg)
![412e7ade6ae164afa21b2ca25f1dc432.gif](https://i-blog.csdnimg.cn/blog_migrate/baeb6861abfa2a6d452cd8007629f6b4.gif)
一个简单的 gif
这样就能在每次动态路由改动时,通过监听 $route 来自定义需要刷新组件那部分的数据了。
总结
一个很简单的例子,希望能帮到遇到此类问题的同学。
虽然官方给出了相关例子,但更多类似的问题我们还是能根据已有的 vue 知识储备来解决。