vue更新路由router-view复用组件内容不刷新

本文知识点比较简单，主要面向vue新人解惑，vue前辈请忽略。

实现功能：

见上图，这是一个产品列表，当进入不同列表时应该更新内容。

代码如下：

//router配置

{path: "/products/:category",name: "Products",components: {...}}

//组件js配置

mounted() {this.getData(this.$route.params.category);},methods: {getData: function(category){this.axios.get("/products/" + category).then(res => {const data = res.data.data;this.pros = data.pro;}).catch(error => {console.log("error init." + error);});}}

目前症状：

1、点击不同类别，url有变化已正确指向不同的路由，但是内容没有更新
2、由当前类别进入其他类别路由后刷新页面，可正确获取数据

知识点

在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view

watch 除了可以监听数据的变化，路由的变化也能被其监听到

:key vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可

针对以上，经过本人项目实践以及网友贡献，有三种方法可解决：

方法一：通过 watch 监听路由（亲测可行）

mounted() {this.getData(this.$route.params.category);
},
methods: {getData: function(category){...}
},
watch: { //通过watch来监听路由变化"$route": function(){this.getData(this.$route.params.category);}
}

方法二：用 :key 来阻止“复用”

具体使用方法：

<router-view :key="key"></router-view>computed: {key() {return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()}
}

tips：使用computed属性和Date()可以保证每一次的key都是不同的，这样就可以如愿刷新数据了

方法三：通过 vue-router 的钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

computed:mapGetters([...
]),
beforeRouteEnter (to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`
}

本人尝试使用"beforeRouteUpdate"，但位得到解决，其他方法没有尝试。

以上内容如果有错误，请各位朋友指出，谢谢。

vue更新路由router-view复用组件内容不刷新相关推荐

vue刷新当前路由：router-view 复用组件时不刷新的3种解决方案总结
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应 ...
【Vue】路由Router嵌套的实现及经典案例
Vue 中路由在使用的时候嵌套使用是非常频繁的,所以本文我们就来通过案例介绍一下嵌套路由的使用. Vue路由嵌套先来准备一个普通的路由案例: <!DOCTYPE html> < ...
【vue】路由Router基础详解，带你快速入门~
什么是路由后端路由: 对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源. 前端路由: 对于单页面应用程序来说,主要通过改变URL中的 hash(#) 来实现不同页 ...
【Vue】路由Router传参的两种方式（详解）
本文我们来介绍一下Vue中的路由传参问题,首先我们来准备一个基本路由的页面,如下: <!DOCTYPE html> <html lang="en"> & ...
解决 Vue 中路由跳转相同路径页面不刷新的问题
vue 中同一路由跳转由于不会重新执行生命周期,所以数据不更新.不管是动态路由,还是传参都不会刷新页面最简单最常用的方式是监听路由变化,在路由发生变化后执行一系列操作 watch: {$route( ...
span组件内容的刷新（笔记）
span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素.//赋值$("#spanid").html(value)//取值$("#spanid&q ...
nuxt页面跳转_nuxt 项目如何解决组件复用时页面不刷新的问题
组件复用会在两种情况下发生: 1.使用 keep-alive 时,页面再次跳转时,数据不更新每一次路由的切换都会导致页面被重新渲染,无论是各种钩子还是异步获取数据函数都会被执行,为了提高网站性能,可 ...
Vue day06 路由
Vue day06 路由补充父传子props的约束条件: 父传子:子接收用对象方式,那么可以增加约束条件在child.vue中props: {msg:{// 必填项required:true,/ ...
vue路由参数改变，组件数据没重新更新问题
最近一段时间在用vue做项目,遇到一个很纠结的问题,本来是两个页面样式结构相似,就是数据不同,所以在router里面配置了一个id参数,发现vue路由参数改变,组件数据没重新更新,查了一下官方文档,发 ...
Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

vue更新路由router-view复用组件内容不刷新

vue更新路由router-view复用组件内容不刷新相关推荐

最新文章

热门文章