在日常开发过程中,可能会遇到一些类似于新闻详情页的内容,需要把所有详情页映射到同一组件上,这是动态路由匹配的应用场景之一。在使用的过程中,也遇到过一些小坑,此篇做个简要的总结说明:

基本使用

 {
path: 'newsDetail/:uid',
name: 'newsDetail',
component: NewsDetail
}

其中uid是路由参数,在跳转到指定新闻详情页可以通过以下方式:

 this.$router.push({name: 'newsDetail', params: {uid: this.data.next.uid}});

问题:

  跳转时页面内容不刷新

    原因:当前组件被复用,组件的生命周期钩子失效

    解决思路:

      1、监听$route的变化,在$route监听方法中处理逻辑

 watch: {
'$route'() {
let bean = {uid: this.$route.params.uid};
this.getNewsDetail(bean);
}
},

      2、在组件生命周期钩子中处理(beforeRouteUpdate)

浅谈vue之动态路由匹配的更多相关文章

  1. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  2. 【ASP.NET MVC系列】浅谈ASP.NET MVC 路由

    ASP.NET MVC系列文章 [01]浅谈Google Chrome浏览器(理论篇) [02]浅谈Google Chrome浏览器(操作篇)(上) [03]浅谈Google Chrome浏览器(操作 ...

  3. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  4. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  5. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  6. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  7. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  8. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  9. Vue-Router动态路由匹配

    //重点在于路由出口 <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- & ...

随机推荐

  1. java Comparable 和 Cloneable接口

    Comparable接口定义了compareTo方法,用于比较对象. 例如,在JavaAPI中,Integer.BigInteger.String以及Date类定义如下 Cloneable接口 Clo ...

  2. 【shell】查找后拷贝find . -name *.csv -exec cp {} /home/ \;

    Find命令的一般形式为: find pathname -options [-print -exec -ok] 让我们来看看该命令的参数: pathname: find命令所查找的目录路径.例如用.来 ...

  3. xargs -i和-I的区别【转】

    xargs与find经常结合来进行文件操作,平时删日志的时候只是习惯的去删除,比如  # find . -type f -name "*.log" | xargs rm -rf * ...

  4. Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列

    Oracle把逗号分割的字符串转换为可放入in的条件语句的字符数列   前台传来的字符串:'589,321' SELECT*FROM TAB_A T1 WHERE  T1.CODE  IN ( SEL ...

  5. H3C SNMP OID

    有两种mib-style [1]老些的设备 cpu 使用率OID: .1.3.6.1.4.1.25506.2.6.1.1.1.1.6.slot  内存使用率OID: .1.3.6.1.4.1.2550 ...

  6. Android APP—— 开发入门教程

    一.SDK下载 下载:adt-bundle-windows-x86_64-20140702.zip(20140702 已经是最后版本了) 解压出来如下: 点击Eclipse安装 创建一个新的工作空间安 ...

  7. IDEA测试结果查看

    点击漏斗图标切换查看测试日志信息,点击,导出测试报告

  8. JS正则表达式大全(附例子)

    0 前言 正则表达式用来字符串匹配,格式校验,非常cool且有趣. 1 正则表达式中的特殊字符 \ 做为转义,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符" ...

  9. 卓越的目标检测器Pelee

    Densenet的改良—PeleeNET Pelee: A Real-Time Object Detection System on Mobile Devices 论文地址:https://arxiv ...

  10. Inno Setup 系列之安装、卸载前检测进程运行情况并关闭相应进程

    需求 最近用 Inno Setup 做一个exe,可是在安装之前要停止正在运行的相应进程或者在卸载之前要停止正在运行的相应进程,可是发现它自身的方法不能满足要求,最后经过度娘的耐心帮助下终于在网上找到 ...