介绍“& lt; script>”
“出口”的默认' ' {'
“道具:{”
“openroute: {”
类型:布尔,
“违约””:()=比;(' '真' ')'
'}
“}”,
“}”
“& lt;/script>” “& lt; script>”
“出口”的默认' ' {'
的方法:{
“fetchData(页面){'
'/请求参数的
“让params='这' ' .params;
'//请求页码”
“让newPage;”
'//openroute处理的
'如果' ' (' ' ' ' .openroute) {”
'//为url添上#页面”
如果' '(页面){'
“history.replaceState(参数。数据文档。标题”、““#”;“+页面),“
'}' '其他' ' {'
“如果‘(history.state) {'
‘如果’’(! history.state。关键,,的位置。散列,,location.hash.split (““#”;“),,location.hash.split (““#”;“) [1]) {'
‘如果’”(JSON.stringify (history.state) !==JSON.stringify (params.data)){' '//选择条件变更则请求第一页”
“history.replaceState(参数。数据文档。标题”、““# 1“的”),“
'}' '其他' ' {'
“history.replaceState(参数。数据文档。标题”、““#”;“+ location.hash.split (““#”;“) [1]);“
“}”
'}' '其他' ' {'
“history.replaceState(参数。数据文档。标题”、““# 1“的”),“
“}”
'}' '其他' ' {'
‘如果’”(位置。散列,,location.hash.split (““#”;“),,location.hash.split (““#”;“) [1]) {'
“history.replaceState(参数。数据文档。标题”、““#”;“+ location.hash.split (““#”;“) [1]);“
'}' '其他' ' {'
“history.replaceState(参数。数据文档。标题”、““# 1“的”),“
“}”
“}”
“}”
'//获取url后面的#页面”
‘如果’”(位置。散列,,location.hash.split (““#”;“),,location.hash.split (““#”;“) [1]) {'
' newPage=数量(location.hash.split (““#”;“) [1]);”
'}' '其他' ' {'
“newPage=1;
“}”
“}”“其他”
“{”
“newPage=页面;”
“}”
'//请求数据,获得结果,传递给列表页面”
“}”
“}”
“}”
“& lt;/script>” “& lt; script>”
“出口”的默认' ' {'
的数据()
{“eturn”
“{”
的形式:{
“aaa:(历史。状态,,history.state.aaa) ?history.state。aaa:‘零’”、“
“bbb:(历史。状态,,history.state.bbb) ?history.state。bbb:‘零’”、“
“ccc:(历史。状态,,history.state.ccc) ?history.state。ccc:‘零’
“}”,
”},“
“}”
”},“
“& lt;/script>”
小编给大家分享一下Vue如何使用历史记录上一页面的数据方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
前言
本文主要介绍的是Vue利用历史记录上一页面数据的相关内容,Vue使用历史后,能够使得url更加漂亮,也就是不再有“# & # 39;的问题,下面话不多说了,来一起看看详细的介绍吧
需求
从列表页的第二页进入详情页,返回时列表页仍然显示在第二页;
从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在。
技术选择
使用vue-router组件,通过。美元路由器。push({路径:路径查询:查询});方式,将页码和选择条件作为参数存储在url中,这种方式在上面的UI设计中是可行的,但是当列表页中包含选项卡组件时(分页组件是公用的),会因为推动的因素(因为推动会打开新页面)导致一些问题(PS:也可能是本人技术能力的原因),未实现。
使用历史API (HTML5开始支持),通过history.replaceState方式,将页码作为参数存储在url中,将选择条件存储在历史中(尚不清楚数据具体是存储在哪里),通过location.hash方式获取页码,通过历史。州方式获取存储的选择条件。
具体实现——技术选择2
开关
为分页组件添加一个开关(openroute),因为需要灰度上线,万一有问题,要调整的页面也只有一个。代码如下:
分页组件中存储页码和选择条件,获取页码
列表页面获取选择条件
目前可能是因为框架设计的问题,没法在请求数据之前通过对象。分配方式为替换初始变量,所以先这样处理(笨方法,各位大佬有解决办法麻烦指导下,谢谢):
