vue 使用同一组件,切换时不触发created、mounted钩子
两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发created或者mounted钩子。
方法一:通过watch $route的变化来做处理
watch: {
$route() {
if (this.$route) {
...
}
}
},
方法二:在 router-view上加上一个唯一的key,来保证路由切换时都会重新渲染触发钩子
<router-view :key="key"></router-view>
computed: {
key() {
return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
}
}
vue 使用同一组件,切换时不触发created、mounted钩子的更多相关文章
- Vue学习之组件切换及父子组件小结(八)
一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...
- Vue系列之 => 组件切换
组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue 动态创建组件(运行时创建组件)
function mountCmp (cmp, props, parent) { if (cmp.default) { cmp = cmp.default } cmp = Vue.extend(cmp ...
- Vue中在组件销毁时清除定时器(setInterval)
在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...
- vue调用子组件方法时,参数传不过去
有可能是因为子组件方法用了 async await 子组件去掉async就好了
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- vue实现tab选项卡切换
上代码: <template> <div class="push"> //点击按钮 <div class="tab&qu ...
- vue -vantUI tab切换时 list组件不触发load事件解决办法
最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...
- vue路由切换时内容组件的滚动条回到顶部
在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...
随机推荐
- caffe命令及其参数解析
caffe的c++主程序(caffe.cpp)放在根目录下的tools文件夹内, 当然还有一些其它的功能文件,如:convert_imageset.cpp, train_net.cpp, test_n ...
- ASCII码对应表chr(9)、chr(10)、chr(13)、chr(32)、chr(34)、chr(39)、chr(..
chr(9) tab空格 chr(10) 换行 chr(13) 回车 Chr(13)&chr(10) 回车换行 chr(32) 空格符 ...
- P3066 [USACO12DEC]逃跑的BarnRunning Away From… 树上差分_树上倍增
code: #include <cstdio> using namespace std; #define ll long long const int N=200005; int n,fa ...
- JavaScript设计模式(biaoyansu)
1.构造器模式——创建类模式 ES6:class Student{ constructor(score,quality){ this.score = score this.quality = qu ...
- POJ 3630 Phone List(字典树)
题意 题意:t个case(1<=t<=40),给你n个电话号码(电话号码长度<10)(1 ≤ n ≤ 10000),如果有电话号码是另一个电话号码的前缀,则称这个通讯录是不相容的,判 ...
- 推荐《SQL基础教程(第2版)》中文PDF+源代码+习题答案
我认为<SQL基础教程(第2版)>非常适合数据库学习的初学者.论述的角度是读者的角度,会换位思考到读者在看到这一段时候会发出怎样的疑问,非常难得:原始数据的例题只有一道,但是可以反复从不同 ...
- uname---用于打印当前系统相关信息
uname命令用于打印当前系统相关信息(内核版本号.硬件架构.主机名称和操作系统类型等). 语法 uname(选项) 选项 -a或--all:显示全部的信息: -m或--machine:显示电脑类型: ...
- java回调方法、钩子方法以及模板方法模式
在面向对象的语言中,回调则是通过接口或抽象类来实现的,我们把实现这种接口的类称为回调类,回调类的对象称为回调对象,其处理事件的方法叫做回调方法.(摘自百度百科) 那么通过上面那句话将百度百科中的&qu ...
- struts2登录后返回登录前的页面
在Action中添加 String getUrl() { return ServletActionContext.getRequest().getHeader("referer") ...
- android 2048游戏实现
android 的2048小游戏完整实现:GridLayout布局(android 4.0及以上). 曾经做过一个2048的算法题,学了几天android,认为能够实现个安卓版的.也就动手写了个. 包 ...