vue router子路由,vue-router的组件

　　本文介绍了如何解决vue的路由组件vue-router实例的复用问题，对大家的学习或工作有一定的参考价值。让我们和边肖一起学习。

　　最近，在开发过程中遇到了以下问题：

　　目前的路线如下

　　http://127 . 0 . 0 . 1:3010/订单？关键词=22

　　只改变关键词的值，路由不跳转。

　　http://127 . 0 . 0 . 1:3010/订单？关键词=33338

　　原因如下图所示：

　　文件：https://router.vuejs.org/en/essentials/dynamic-matching.html

　　这种情况的在线解决方案是：

　　使用vue-router切换路由将触发组件树的更新，并根据定义的路由呈现新的组件树。一般的切换过程如下：

　　-停用并移除不需要的组件。

　　-验证切换的可行性。

　　-重复使用未更新的组件。

　　-启用和激活新组件

　　vue-router如何判断某个组件可以复用？让我们来看看下面的路由配置：

　　{

　　路径： post/:postId ，

　　姓名：帖子，

　　组件：resolve=require([。/components/Post.vue]，解析)

　　}

　　这是通过文章ID加载相应文章页面的路径。当我们第一次访问它时，组件Post.vue将被渲染到组件树中。当mounted安装组件时，它通过文章ID获取文章内容，并将其显示在页面上。当我们访问另一篇文章时，路由参数：postId会发生变化。按照我们的预期，应该显示新文章的内容，但是事与愿违。

　　我们看到的是上一篇文章。虽然路由参数已经更改，但vue-router会认为您正在访问Post.vue组件。由于组件之前已经渲染过，所以它将直接重用之前的组件，而不会在组件中执行任何操作，包括生命周期功能，如mounted。

　　所以我们最终看到的是原组件的内容。

　　那怎么才能达到预期的效果呢？这里有一个有效的解决方法。

解决方法

　　我们可以使用watch listener来监控路由的变化，并根据路由参数的变化来响应相应的数据。具体实施过程如下：

定义数据获取方法

　　首先定义一个获取文章的方法，根据文章ID从后台获取相应的文章信息。

　　方法：{

　　getPost(postId) {

　　这个。$ http . get(`/post/get _ post/$ { postId } `)。然后((响应)={

　　if(response.data.code===0){

　　this . post=response . data . post；

　　}

　　});

　　}

　　}

监听路由

　　然后在路由切换时，判断目标组件是否为Post.vue组件，可以根据定义的路由名称实现。如果是，我们可以从路由信息中获取目标文章ID来更新组件内容。

　　观察：{

　　$route(目的地，出发地){

　　if(to.name===post){

　　this . get post(to . params . postid)；

　　}

　　}

　　}

组件初始化

　　这里需要注意的是，当组件第一次挂载到组件树上时，对路由的监控是无效的。这时，我们需要在生命周期中初始化组件挂接：

　　已安装(){

　　this.getPost(this。$ route . params . postid)；

　　}

　　这就是本文解决重用vue路由组件vue-router实例问题的全部内容。希望对大家的学习有帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。