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。
vue-router组件重用 路由切换时的问题的更多相关文章
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
- vue(组件、路由)懒加载
const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue 路由切换时页面内容刷新页面并更新数据
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...
- Vue的组件和路由
组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 组件的 ...
- 记录21.07.24 —— Vue的组件与路由
VUE组件 作用:复用性 创建组件的三种方式 第一种:使用extends搭配component方法 第二种:直接使用component方法 只有用vue声明且命名的才称之为创建组件 注意:templa ...
- vue 2.0 路由切换以及组件缓存源代码重点难点分析
摘要 关于vue 2.0源代码分析,已经有不少文档分析功能代码段比如watcher,history,vnode等,但没有一个是分析重点难点的,没有一个是分析大命题的,比如执行router.push之后 ...
- vue 使用同一组件,切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子. 方法一:通过watch $route的变化来做处理 watch: { $route() { ...
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...
随机推荐
- CentOS7.x安装MySQL5.7.25
mysql 5.7下载地址 社区版下载地址:https://dev.mysql.com/downloads/mysql/ 可能会有变动 找到5.7版本, 注:源码安装需要用到下面的包,可以先忽略,我安 ...
- hbuilder IOS APP 打包与发布
---恢复内容开始--- 准备:苹果开发者账号,一个Mac系统 没有账号可以再这里注册 https://developer.apple.com/ 因为账号是公司的,自己并没有注册过,这里就不进行阐述了 ...
- 【原创】谈谈线上CPU100%排查套路
引言 不知道在大家面试中,有没有遇到这个问题 生产服务器上部署了几个java程序,突然出现了CPU100%的异常告警,你如何定位出问题呢? 这个问题分为两版回答! 高调版 对不起,我是做研发的,这个问 ...
- 类System
System类简介: 在 System 类中提供了大量的静态方法,有标准输入.标准输出和错误输出流:对外部定义的属性和环境变量的访问:加载文件和库的方法:还有快速复制数组的一部分的实用方法. 常用方法 ...
- Springboot集成Redis步骤
Spring boot 集成Redis的步骤如下: 1.在pom.xml中配置相关的jar依赖: <!--加载spring boot redis包 --> <dependency&g ...
- Echarts学习之路3(在react中使用)
安装: npm install echarts --save demo import React, { Component } from 'react'; // 引入 ECharts 主模块 impo ...
- 工具(1): 极简Word排版示例(Example by Word2013)
文档标题 第一行写下文档的名字,居中,微软雅黑字体,三号 章节标题 每一章的标题单独一行,光标选中这行,设置为标题1 每一节的标题单独一行,光标选中这行,设置为标题2 全部章节标题设置完毕后,下一步 ...
- Vue.js 2.x笔记:状态管理Vuex(7)
1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...
- Python——Pyqt5(界面)——基本设置
一.Pycharm外加设置 设置扩展工具 1.Qt Design(图形界面) Program:工程目录\venv\Lib\site-packages\pyqt5-tools\designer.exe ...
- JavaScript继承总结
1.创建对象 1.字面量对象 2.构造函数 3.Object.create //1.字面量 var obj={ name: '字面量', show: function(){ console.log(t ...