需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功。

过程出现的bug和问题:

  1、使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载

  2、改用query进行传参后,页面刷新后图片无法加载,这是由于图片的url是在created钩子函数调用查询数据api后才进行赋值,而赋值之后页面已经渲染完成,导致图片无法加载成功

解决方案:

  1、通过localStorage将数据持久化,在跳转到当前路由时,先使用localStorage将数据持久化,这里可以配合vuex进行操作

  2、页面渲染前,图片的url直接读取localStorage的值,就不会出现页面渲染完成,url还没被赋值导致图片无法加载的情况

附上代码:

  需要从 /zyview 跳转至 /viewmessage

  /zyview跳转部分:

      this.$router.push({
// path: `/viewmessage/${this.names[index]}`,
// 使用下列方法方法跳转路由,就不会出现点击tab后再次跳转的bug
name: "viewmessage",
query: {
name: this.lists[index].m_name, // 此为药品名称
index: index, // 药材索引
mid: this.lists[index].id, // 药材id
// imgpath: this.lists[index].img_path
},
});

  触发跳转的方法:

    gotodescribe(e,index) {
console.log(this.lists[index].id)
console.log(this.test)
const path = this.lists[index].img_path
// 这里path和index是和store中actions方法里面的变量名意义对应,名字不对应无法传值
this.$store.dispatch('addimagepath', {path,index})
console.log("存储内容" + this.$store.state.imgpath.imgpaths[this.$route.query.index])
this.$router.push({
// path: `/viewmessage/${this.names[index]}`,
// 使用下列方法方法跳转路由,就不会出现点击tab后再次跳转的bug
name: "viewmessage",
query: {
name: this.lists[index].m_name, // 此为药品名称
index: index, // 药材索引
mid: this.lists[index].id, // 药材id
// imgpath: this.lists[index].img_path
},
});
},

  这是跳转前将数据持久化的步骤:

this.$store.dispatch('addimagepath', {path,index})

以下为vuex部分,新建一个文件写此存储图片路径的模块:

const state = {
// 图片路径
imgpaths: [],
// imgpaths: localStorage.getItem(imgpaths[index]),
test: "b4b797913756456bb5ffd8d661ab79e5.jpg"
}
const getters = { }
// 改变state状态
const mutations = {
addimgpath(state,{path,index}){
state.imgpaths[index] = path
localStorage.setItem(index,path)  // 这里使用localStorage持久化数据,后面页面就直接读取localStorage中的数据
}
}
const actions = {
addimagepath(context,{path,index}){
context.commit('addimgpath',{path,index})
}
} export default {
state,
getters,
mutations,
actions
}

   /viewmessage部分:

        <el-image
:src="`http://image.zysuyuan.cn:8031/${this.path}`"
style="width: 400px; height: 400px"
:fit="fit"
alt="药材"
></el-image>
  data() {
return {
path: localStorage.getItem(this.$route.query.index),
.........
}
}

  created和watch:

  created() {
this.fetchData();
}, watch: {
$route(to, from) {
this.path = localStorage.getItem(this.$route.query.index);
this.fetchData();
}
},

  

vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据的更多相关文章

  1. asp.net向后台传参数动态加载图片

    //向后台传参数动态加载图片 $(function() { $("#Button1").click(function() { var stockcode = getUrlParam ...

  2. vue动态加载图片,取消格式验证

    vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...

  3. Vue加载组件、动态加载组件的几种方式

    https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...

  4. Java 动态编译组件 & 类动态加载

    1.JDK6 动态编译组件 Java SE 6 之后自身集成了运行时编译的组件:javax.tools,存放在 tools.jar 包里,可以实现 Java 源代码编译,帮助扩展静态应用程序.该包中提 ...

  5. Vue动态加载图片图片不显示

    图片是放在assets文件夹下的 使用require进行解决 图片不显示的原因 在webpack,将图片放在assets中,会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法 ...

  6. vue动态加载图片

    如果是直接动态获取完整的图片地址可以使用以下方法 <template> <img :src="url"> </template> <scr ...

  7. vue中动态加载图片路径的方法

    assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>和background:url(./logo.p ...

  8. vue 动态加载图片路径报错解决方法

    最近遇到图片路径加载报错的问题 之前一直都是把图片放到assets的文件下的.总是报错,看到一些文章并且尝试成功了,特意记录下 首先先说明下vue-cli的assets和static的两个文件的区别, ...

  9. Vue 动态加载组件

    为什么要动态加载呢?而不是一次性加载呢? 一次性?你能保证你拿的内容不多,那从性能方面说还是OK的.否则,就该什么时候用,就什么时候取. 得出这想法,源于前几天上班赶产品的故事: A组件是父亲,B组件 ...

随机推荐

  1. 浏览器自带记忆功能,使input颜色和字体丢失

    方法一 : 会有视觉上颜色的变化input:-internal-autofill-selected { /*内置阴影填充 背景颜色*/ box-shadow: inset 0 0 0 1000px # ...

  2. JAVA数据结构之哈希表

    Hash表简介: Hash表是基于数组的,优点是提供快速的插入和查找的操作,编程实现相对容易,缺点是一旦创建就不好扩展,当hash表被基本填满的时候,性能下降非常严重(发生聚集引起的性能的下降),而且 ...

  3. css---6伪元素选择器

    after                   :在内容后边 <!DOCTYPE html> <html lang="en"> <head> & ...

  4. leetcode-第10周双周赛-5099验证回文字符串③

    题目描述: 方法:动态规划 class Solution: def isValidPalindrome(self, s: str, k: int) -> bool: def isKPalRec( ...

  5. [JZOJ4616] 【NOI2016模拟7.12】二进制的世界

    题目 题目大意 给你一个数列,每个数为[0,65535][0,65535][0,65535]内的整数. 给定一个位运算操作optoptopt,是andandand.ororor.xorxorxor中的 ...

  6. python的基本数据类型与字符串的操作

    一.基本数据类型 (int, bool, str ) int: 整数 str:字符串,一般不存放大量的数据 bool:布尔值,用来判断.True ,Flase list:列表,用来存放大量的数据. [ ...

  7. 浅析ES的_source、_all、store、index

    Elasticsearch中有大量关键概念容易混淆,对于初学者来说是噩梦: _source字段里存储了什么? index属性的作用是什么? 何时应该开启_all字段? store属性和_source字 ...

  8. SpringBoot--外部配置

    常见的SpringBoot外部配置有常规属性配置.类型安全的配置.日志配置.Profile配置 一.常规属性配置 在spring中,注入properties中的配置值时,需要两步: 通过注解@Prop ...

  9. 字段username没有默认值查询(设计数据库一定要养成好习惯,不是主键最好设置为可以为空)

    今天创建了一个表,但是username作为外键(不是主键)没有设置为可以为空,结果提交表单时忘记写username就报错了

  10. 2019-8-31-C#-如何给-ValueTuple-返回值添加注释

    title author date CreateTime categories C# 如何给 ValueTuple 返回值添加注释 lindexi 2019-08-31 16:55:58 +0800 ...