vue-router组件复用问题详解
组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件,通过组合组件来组成应用程序,结合 vue-router 的路由功能将各个组件映射到相应的路由上,通过路由的变化来告诉Vue要在哪里渲染他们,实现各个组件、各个页面之间的跳转导航。
创新互联公司是一家专注于网站设计制作、成都网站设计与策划设计,申扎网站建设哪家好?创新互联公司做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:申扎等地区。申扎做网站价格咨询:18980820575
问题
使用 vue-router 切换路由时会触发组件树的更新,根据定义的路由渲染一个新的组件树,大致的切换过程是这样的:
- 停用并移除不需要的组件
- 验证切换的可行性
- 复用没有进行更新的组件
- 启用并激活新的组件
具体路由切换控制流程请参考官方文档:切换控制流水线
那 vue-router 是怎么判断某一个组件可以复用的呢? 我们看一下下面这条路由配置:
{ path: 'post/:postId', name: 'post', component: resolve => require(['./components/Post.vue'],resolve) }
这是通过文章ID加载对应文章页面的路由,第一次访问时, Post.vue 这个组件会被渲染到组件树中,mounted安装组件时通过文章ID获取文章内容展示到页面上,当我们访问另一篇文章时,路由参数 :postId 发生改变,按照我们的预期应该会展示新文章的内容,但是事与愿违。
我们看到的还是之前的文章,虽然路由参数已发生更改,但是 vue-router 会以为你访问的是 Post.vue 这个组件,由于之前已经渲染过该组件,所以会直接复用之前的组件,并且 不会 执行组件中的任何操作包括 mounted 之类的生命周期函数。
所以我们最终看到的还是原来组件的内容。
那要怎么才能实现我们期望的效果呢?下面介绍一种有效的解决方法
解决方法
我们可以使用 watch 侦听器来监听路由的变化情况,根据路由参数的变化来响应相应的数据,具体实现过程是这样的:
定义数据获取方法
首先定义一个获取文章的方法,根据文章ID从后台获取对应的文章信息。
methods: { getPost(postId) { this.$http.get(`/post/get_post/${postId}`).then((response) => { if(response.data.code === 0){ this.post = response.data.post; } }); } }
监听路由
接着是在路由切换的时候判断目标组件是否是 Post.vue 组件,这里可以根据定义的路由名称 name 实现,如果是,我们就可以从路由信息中获取目标文章ID来更新组件内容。
watch: { '$route' (to, from) { if(to.name === 'post'){ this.getPost(to.params.postId); } } }
组件初始化
这里需要注意的是, 当组件首次被挂载到组件树上时,对路由的监听是无效的 ,这时我们需要在生命周期钩子 mounted 对组件进行初始化工作:
mounted() { this.getPost(this.$route.params.postId); }
写在最后
通过上面的方法就可以实现组件内容随路由参数的变化而更新了,有效解决了 vue-router 组件复用导致路由参数失效的问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
当前名称:vue-router组件复用问题详解
文章分享:http://pwwzsj.com/article/pgdijj.html