标签：pat 通过 router 不同的 creat hda cal local 渲染
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持久化数据
标签：pat 通过 router 不同的 creat hda cal local 渲染
原文地址：https://www.cnblogs.com/flypig666/p/11779796.html
