vue-router组件重用路由切换时的问题

当一个组件被重用时，切换路由，该组件不会被销毁。该组件的created也不会被调用，如果在created中有获取数据的操作，切换路由后，就不会再获取新的数据了，界面上就没有刷新。

其实官方文档就有解决方法：

官方连接https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

但是，这里还需要注意一点，beforeRouteUpdate只有这种情况才会被调用：当前路由改变，但是该组件被复用时调用。例如带动态参数的路径 /user/:id，

从 /user/1 切换到 /user/2时，由于会渲染同样的user组件，因此组件实例会被复用，这个钩子就会在这种情况下被调用。

如果是/adduser切换到/user/1是不会调用beforeRouteUpdate的，这种情况下应该使用watch。

转载于:https://www.cnblogs.com/lixiuke/p/9871454.html

vue-router组件重用路由切换时的问题相关推荐

【Vue】组件复用导致的路由切换时页面不刷新问题
页面逻辑通过router-link,携带不同params参数,导航向同一个组件. 出现问题1 不同路由切换时组件上的页面不刷新. 问题原因1 mounted() {this.getData();}, ...
vue 点击当前路由怎么重新加载_Vue 路由切换时页面内容没有重新加载的解决方法...
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了: keep-aliv ...
[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决？
[react] 路由切换时同一组件无法重新渲染的有什么方法可以解决? componentWillReceiveProps 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
vue路由跳转动画_vue怎么给路由切换时添加动画
条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件组件根节点这里是一个典型的例子: Toggle hello new Vue({ el: '#demo', data: { s ...
vue 前端进行tab页面切换时，要求不刷新
项目中TagsView组件用于tab页面切换,在项目中已使用keep-alive,目标页面也开启了"缓存"标志,但是在tab标签点击切换时,有几个页面数据还是刷新了.查找了相关资料 ...
React Router v6 的路由切换实现方式
首先需要先引入路由库,并配置好路由规则. 在React Router v6中,可以使用<Routes>和<Route>组件来定义路由规则. 例如: # 使用<Routes ...
vue路由切换时内容组件的滚动条回到顶部
情景描述 1.页面 /a, 有输入框, 当输入框输入合适的值的时候, 不隐藏软键盘, 点击相应按钮直接跳到 /b 2.页面 /b, 页面本来内容很少, 没有滚动条的, 可是莫名的被下方的灰色区域顶到可 ...
animate.css在vue中进行路由切换时的转场动画
在做一些后台管理或者是一些跳转型的网站的时候我们会遇到用动画去切换,显得网站动态化效果强一点,毕竟vue框架属于单页面应用,有些时候一些动画会显得页面的逼格更高一点在选择动画的时候我们绝大多数都会考 ...
Vue Router系列之路由懒加载
文章の目录一.具体需要 3 步: 1.安装 `@babel/plugin-syntax-dynamic-import` 包. 2.在 babel.config.js 配置文件中声明该插件. 3.将路 ...

vue-router组件重用路由切换时的问题

vue-router组件重用路由切换时的问题相关推荐

最新文章

热门文章

vue-router组件重用 路由切换时的问题

vue-router组件重用 路由切换时的问题相关推荐

最新文章

热门文章

vue-router组件重用路由切换时的问题

vue-router组件重用路由切换时的问题相关推荐