两个页面参数不同使用同一组件,默认情况下当这两个页面切换时并不会触发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钩子的更多相关文章

  1. Vue学习之组件切换及父子组件小结(八)

    一.组件切换: 1.v-if与v-else方式: <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. Vue系列之 => 组件切换

    组件切换方式一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. vue 动态创建组件(运行时创建组件)

    function mountCmp (cmp, props, parent) { if (cmp.default) { cmp = cmp.default } cmp = Vue.extend(cmp ...

  4. Vue中在组件销毁时清除定时器(setInterval)

    在mounted中创建并执行定时器,然后在beforeDestroy或者destroyed中清除定时器 <template> <div class="about" ...

  5. vue调用子组件方法时,参数传不过去

    有可能是因为子组件方法用了 async  await 子组件去掉async就好了

  6. Vue内置组件[回顾]

    1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...

  7. vue实现tab选项卡切换

    上代码: <template>   <div class="push">     //点击按钮     <div class="tab&qu ...

  8. vue -vantUI tab切换时 list组件不触发load事件解决办法

    最近由于公司项目需要,用vue写了几个简单的页面.用到了vantUI List 列表 瀑布流滚动加载,用于控制长列表的展示 当列表即将滚动到底部时,会触发事件并加载更多列表项. (页面加载完成后默认会 ...

  9. vue路由切换时内容组件的滚动条回到顶部

    在使用vue的时候会出现切换路由的时候滚动条保持在原来的位置,要切换路由的时候滚动条回到顶部才有更好的用户体验 1.当页面整体都要滚动到顶部的情况 router.afterEach(() => ...

随机推荐

  1. GoldenGate 反向切换步骤

    1 事先配置好反向复制链路: 2 停止源端的应用程序; 3 确认源端Capture已捕获所有的Redo信息: GGSCI>info all GGSCI>info ext_app 4 确认源 ...

  2. 爬虫--BeautifulSoup使用

    解析库 解析器 使用方法 优势 劣势 Python标准库 BeautifulSoup(markup, "html.parser") Python的内置标准库.执行速度适中 .文档容 ...

  3. 【Codeforces Round #239 (Div. 1) A】Triangle

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后的直角三角形可以通过平移,将直角顶点移动到坐标原点. 然后我们只要枚举另外两个点其中一个点的坐标就好了. x坐标的范围是[1.. ...

  4. Linux查看当前正在执行的进程

    Linux查看当前正在执行的进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps PID TTY TIME CMD 2576 pts/0 00:00:00 ...

  5. Codefroces B. Hamming Distance Sum

    Genos needs your help. He was asked to solve the following programming problem by Saitama: The lengt ...

  6. [Chromium文档转载,第004章]Mojo Synchronous Calls

    For Developers‎ > ‎Design Documents‎ > ‎Mojo‎ > ‎ Synchronous Calls Think carefully before ...

  7. VirtualBox中Linux虚拟机与主机共享文件夹

    VirtualBox中Linux虚拟机与主机共享文件夹 一.Linux虚拟机安装增强功能 二.点击虚拟机 设置-->选择 共享文件夹-->点击右侧的带加号的文件夹图标,执行下面的操作1. ...

  8. 通过域 组策略禁用U盘(只允许部份许可U盘可在客户端读取)

    U盘禁用设置步骤: 1.客户端 注册表修改,USBStor  的start改为4 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\UsbSto ...

  9. 如何利用Python词云和wordart可视化工具对朋友圈数据进行可视化展示

    大前天我们通过Python网络爬虫对朋友圈的数据进行了抓取,感兴趣的朋友可以点击进行查看,如何利用Python网络爬虫抓取微信朋友圈的动态(上)和如何利用Python网络爬虫爬取微信朋友圈动态——附代 ...

  10. Mark Compact GC (Part two :Two-Finger)

    目录 Two-Finger算法 前提 概要 步骤一:移动对象 步骤二:更新指针 优缺点 表格算法 概要 步骤一:移动对象群 和 构筑间隙表格 移动对象群 构筑间隙表格 步骤二:更新指针 优缺点 Two ...