项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也显示已经改变,但页面并不会刷新,因为路由是相同的,vue就会认为你是同一个页面,从而复用已加载的页面,而不会重新加载,所以如果在created钩子中来区分状态明显是行不通的,可以通过watch监听事件来监听路由的变化:

watch: {
          '$route' (to, from) {
                     if (to.name === 'projectAdd') {
                             console.log(to.query)     // 在此调用函数
                      }
           }
}
 
通过watch监听即可实现,这里顺带说一下params和query的区别:
 
相同:
使用方法相同,都是在路由跳转的时候带过去:
manageProject (toseId) {
           this.$router.push({
                   name: 'projectAdd',
                   query: {toseId: toseId}       //   params: {toseId: toseId}
           })
}
 
不同:
params需要在路由设置index.js中添加参数(

path: '/projectAdd/:id'),而query不需要;
 
跳转后在URL的显示不同,params显示的是(http://localhost:8082/#/projectAdd/6),query显示的是(http://localhost:8082/#/projectAdd?toseId=6);
 
接收方式不同,params为this.$route.params,query为this.$route.query。
 
 
 
若有错误之处请指出,我会尽快改正,希望对你有帮助
 
 

vue通过ID(参数)修改URL复用同一个页面(组件)不重新加载的问题的更多相关文章

  1. js 获取url中的参数 修改url 参数 移除url参数

    js 获取url中的参数 修改url 参数 移除url参数 var jsUrlHelper = { getUrlParam : function(url, ref) { var str = " ...

  2. 系统管理模块_岗位管理_改进_使用ModelDroven方案_套用美工写好的页面效果_添加功能与修改功能使用同一个页面

    改进_使用ModelDroven方案 @Controller @Scope("prototype") public class RoleAction extends ActionS ...

  3. 前端 | 页面触底自动加载 Vue 组件

    不管是 web 端还是移动端,信息流都是现在很流行的信息展示方式.信息流经常搭配自动加载一起使用以获得更好的使用体验. 最近在使用 Vue 开发过程中也遇到了首页信息流自动加载的需求.大致了解了一下几 ...

  4. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

  5. vue-scroller实现vue单页面的上拉加载和下拉刷新问题

    在vue中如何简单的实现页面的上拉加载和下拉刷新,在这里我推荐使用vue-scrolle插件. vue-scrolle的基本使用方法: 1.下载 npm i vue-scroller -D 2.导包 ...

  6. Vue性能优化之组件按需加载(以及一些常见的性能优化方法)

    关于Vue中的按需加载我就简单介绍一下:大概就是我们所有的东西都会在app.js里面,但是我们并不需要把所有的组件都一次性加载进来,我们可以在需要它的时候再将它加载进来,话不多说,开车! 1.webp ...

  7. win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件

    win7,vs2010,asp.net项目中修改外部js文件,在调试时加载的还是旧文件 我杀过 w3wp.exe和asp.net_state的进程,重启 iis admin的服务,都还是不行. 只是把 ...

  8. JS window对象 返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL。 语法: window.history.back();

    返回前一个浏览的页面 back()方法,加载 history 列表中的前一个 URL. 语法: window.history.back(); 比如,返回前一个浏览的页面,代码如下: window.hi ...

  9. JS window对象 返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL。

    返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL. 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: window.hi ...

随机推荐

  1. c#序列化Json和反序列化

    1.首先确保程序集中添加了  System.Web.Extensions    DLL引用 2.代码中添加命名空间:using System.Web.Script.Serialization; nam ...

  2. golang判断文件/文件夹是否存在

    使用os包,os.stat返回err==nil,说明存在: os.IsNotExist(err)为true,说明不存在:否则不确定是否存在 func DelJar(fileName string) e ...

  3. JeeWx捷微3.1小程序版本发布,支持微信公众号,微信企业号,支付窗——JAVA版开源微信管家

    支持小程序,JeeWx捷微3.1小程序版本发布^_^ JeeWx捷微V3.1——多触点小程序版本管理平台(支持微信公众号,微信企业号,支付窗)   JeeWx捷微V3.1.0版本紧跟微信小程序更新,在 ...

  4. jquery 基础-记住

    jquery最为一个库,简便. 难点在于选择器,筛选器的使用. 属性一般都是,jquery对象.函数(),括号内部添属性. s= '<tr> <td class="fix& ...

  5. 自动调整linux系统时间和时区与Internet时间同步

    调整linux系统时间和时区与Internet时间同步 一.修改时区:# cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime修改为中国的东八区# v ...

  6. DirectShow设置采集帧率码率YUV<转>

    // 设置参数,p1=宽,p2=高,p3=帧率 AM_MEDIA_TYPE *p = NULL; IAMStreamConfig *pSC = NULL; pCGB2->FindInterfac ...

  7. HTTP 错误 403.6 - Forbidden 解决方案

    MSDN 的解决方案 原因 1 Ip 安全的 XML 元素的allowUnlisted属性的值为 false.此外,客户端计算机的 IP 地址不在ip 安全XML 元素之下 IP 地址的列表中.IIS ...

  8. css:自己实现一个带小图标的input输入框

    有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...

  9. Java学习路线(转)

    原文:http://www.hollischuang.com/archives/489 一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http ...

  10. 十张GIFs让你弄懂递归等概念

    图像(包括动图)是传递信息的一种高效方式,往往能增强表象.记忆与思维等方面的反应强度.所谓一图胜千言,说的就是这个道理. 今天为大家整理了十张动图GIFS,有助于认识循环.递归.二分检索等概念的具体运 ...