Vue利用History记录上一页面的数据方法实例

这篇文章主要给大家介绍了关于Vue利用History记录上一页面的数据的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要介绍的是Vue利用History记录上一页面数据的相关内容,vue使用history后,能够使得url更加漂亮,也就是不再有‘#'的问题,下面话不多说了,来一起看看详细的介绍吧

需求

从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;

从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。

技术选择

使用vue-router组件,通过this.$router.push({path: path, query: query});方式,将页码和选择条件作为参数存储在url中,这种方式在上面的UI设计中是可行的,但是当列表页中包含tab组件时(分页组件是公用的),会因为push的因素(因为push会打开新页面)导致一些问题(PS:也可能是本人技术能力的原因),未实现。
使用History API(HTML5开始支持),通过history.replaceState方式,将页码作为参数存储在url中,将选择条件存储在history中(尚不清楚数据具体是存储在哪里);通过location.hash方式获取页码;通过history.state方式获取存储的选择条件。
具体实现--技术选择2

开关

为分页组件添加一个开关(openroute),因为需要灰度上线,万一有问题,要调整的页面也只有一个。代码如下:

`<script>`
`export` `default` `{`
`props: {`
`openroute: {`
`type: Boolean,`
`default``: () => (``true``)`
`}
`},`
`}`
`</script>`

分页组件中存储页码和选择条件&获取页码

`<script>`
`export` `default` `{`
`methods: {`
`fetchData(page) {`
`/请求参数`
`let params =` `this``.params;`
`//请求页码`
`let newPage;`
`//openroute处理`
`if` `(``this``.openroute) {`
`//为url添上#page`
`if` `(page) {`
`history.replaceState(params.data, document.title,` `"#"` `+ page);`
`}` `else` `{`
`if` `(history.state) {`
`if` `(!history.state.key && location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`if` `(JSON.stringify(history.state) !== JSON.stringify(params.data)) {` `//选择条件变更则请求第一页`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);`
`}`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}`
`}` `else` `{`
`if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`history.replaceState(params.data, document.title,` `"#"` `+ location.hash.split(``"#"``)[1]);`
`}` `else` `{`
`history.replaceState(params.data, document.title,` `"#1"``);`
`}`
`}`
`}`
`//获取url后面的#page`
`if` `(location.hash && location.hash.split(``"#"``) && location.hash.split(``"#"``)[1]) {`
`newPage = Number(location.hash.split(``"#"``)[1]);`
`}` `else` `{`
`newPage = 1;`
`}`
`}` `else` 
`{`
`newPage = page;`
`}`
`//请求数据,获得结果,传递给列表页面`
`}`
`}`
`}`
`</script>`

列表页面获取选择条件

目前可能是因为框架设计的问题,没法在请求数据之前通过Object.assign方式为替换初始变量,所以先这样处理(笨方法,各位大佬有解决办法麻烦指导下,谢谢):

`<script>`
`export` `default` `{`
`data()
 {`eturn`
`{`
`form: {`
`aaa: (history.state && history.state.aaa) ? history.state.aaa :` `null``,`
`bbb: (history.state && history.state.bbb) ? history.state.bbb :` `null``,`
`ccc: (history.state && history.state.ccc) ? history.state.ccc :` `null`
`},`
`};`
`}`
`};`
`</script>`

已解决,初始变量不需要动,可以通过以下方式实现:

`if` `(history.state) {`
`Object.assign(``this``.form, history.state)`
`if` `(``this``.form.key) {`
`delete` `this``.form.key`
`}`
`}`
`},`

这里记录下:之前以为created方法是在分页组件的watch监听之后执行的,后来发现被误导了(因为之前是通过Object.assign(true, this.form, history.state)方式实现数据赋值的,但是并没有成功)。下面做个小总结:

Object.assign(true, a, b);”和“Object.assign(a, b);”有什么区别?

结论:前者:改a不影响b;后者:改a影响b

分析(这篇文章有源码分析( <font color='red'>求解答:WebStorm中如何关联源码?</font>),很棒):

FAQ

需要使用history.replaceState方式是因为:它不会将更改后的url压到history栈中,所以不会增加回退和前进的操作步数;
使用history.replaceState方式,可存储的state大小不能操作640k;
可能存在浏览器兼容性问题,请从此处查阅:https://caniuse.com/#feat=his...
Demo Or Source

因为是公司项目,所以目前没有Demo或源码

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过 Vue Router 实现页面跳转和展示不同数据的功能。具体步骤如下: 1. 安装 Vue Router 在终端中运行以下命令: ``` npm install vue-router ``` 2. 创建路由 在项目中创建一个 `router.js` 文件,定义路由: ```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import Detail from './views/Detail.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/detail/:id', name: 'Detail', component: Detail, props: true } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 这里定义了两个路由,一个是首页 `/`,一个是详情页 `/detail/:id`,其中 `:id` 表示参数,用于动态展示不同的数据。 3. 创建组件 在项目中创建 `Home.vue` 和 `Detail.vue` 两个组件,分别用于展示首页和详情页的内容。 4. 在首页中展示数据 在 `Home.vue` 中展示数据,并将每一行数据包装在 `router-link` 中,用于跳转到详情页: ```html <template> <div> <h1>首页</h1> <ul> <li v-for="item in list" :key="item.id"> <router-link :to="'/detail/' + item.id">{{ item.title }}</router-link> </li> </ul> </div> </template> <script> export default { data() { return { list: [ { id: 1, title: '文章1', content: '这是文章1的内容' }, { id: 2, title: '文章2', content: '这是文章2的内容' }, { id: 3, title: '文章3', content: '这是文章3的内容' } ] } } } </script> ``` 5. 在详情页中展示数据 在 `Detail.vue` 中展示传递过来的参数对应的数据: ```html <template> <div> <h1>详情页</h1> <p>{{ content }}</p> </div> </template> <script> export default { props: { id: { type: Number, required: true } }, data() { return { content: '' } }, created() { // 根据传递过来的 id 获取对应的数据 this.content = this.getContentById(this.id) }, methods: { getContentById(id) { // 根据 id 获取对应的数据,这里只是模拟数据 const data = { 1: { id: 1, title: '文章1', content: '这是文章1的内容' }, 2: { id: 2, title: '文章2', content: '这是文章2的内容' }, 3: { id: 3, title: '文章3', content: '这是文章3的内容' } } return data[id].content } } } </script> ``` 6. 在入口文件中使用路由 在入口文件 `main.js` 中使用路由,并将其挂载到 Vue 实例中: ```javascript import { createApp } from 'vue' import App from './App.vue' import router from './router' createApp(App).use(router).mount('#app') ``` 现在,点击首页中的每一行数据都可以跳转到对应的详情页,并展示不同的数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值