vue 商城浏览足迹_vue实现用户获取浏览记录功能
在路由配置文件设置一个属性用来判断当前路由是否须要记录,如要记录当前路由设置为turejavascript
memoryRouter: false //是否记忆当前路由为经常使用工具
{
path: '/helloWorld',
name: 'HelloWorld',
component: HelloWorld,
meta: {
requireAuth: false // 是否须要登陆访问 true是 false否
, navBar: false // 是否显示顶头nav标题栏
, tabBar: true // 是否显示底部tab导航栏
, keepAlive: true // 是否使用 keep-alive 缓存页面
, memoryRouter: false //是否记忆当前路由为经常使用工具
}
},
在main.js文件中,路由守卫里添加本地缓存保存路由浏览记录;java
// 全局路由守卫
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth === true && !getToken()) {
next({
name: 'Login'
})
} else {
// 记忆最近访问过的经常使用功能====================
const commonTools = localStorage.getItem("commonTools") ? JSON.parse(localStorage.getItem("commonTools")) : new Array();
const routerData = new Object();
routerData.router = new Object();
routerData.router.name = to.name;
routerData.router.params = to.params;
routerData.router.query = to.query;
routerData.title = to.meta.pageTitle;
routerData.name = to.name;
let flag = false;
for(let key in commonTools){
if(commonTools[key].name === to.name && key < 3){
flag = true;
}
}
if(!flag && routerData.title && to.meta.memoryRouter) {
commonTools.splice(0, 0, routerData);
}
store.commit('COMMON_TOOLS', commonTools);
// 记忆最近访问过的经常使用功能====================end
/*记忆当前路由信息,用于token失效后,从新登陆时回到当前页面*/
// 缓存当前路由名称,登陆成功后自动跳转到该路由页面
if(to.name !== "Login") {
let memoryRouter = new Object();
memoryRouter.name = to.name;
memoryRouter.params = to.params;
memoryRouter.query = to.query;
SetAutoJumpRouteName(memoryRouter);
}else{
sessionStorage.removeItem("autoJumpRouteName");
}
//实时更新用户信息
sendGetUserInfo(()=>{})
next()
}
});
因为项目须要,这里须要配合状态管理一块儿使用缓存
在store文件夹里有一个Getters.js文件,在这里加上session
//获取最近访问的经常使用工具
getCommonTools: state => {
let commonTools = localStorage.getItem("commonTools") ? JSON.parse(localStorage.getItem("commonTools")) : new Array()
if(commonTools.length > 0){
state.commonTools = commonTools;
}
return state.commonTools
}
在Moutations.js文件里工具
const COMMON_TOOLS = 'COMMON_TOOLS' // 更新最近访问的经常使用工具
// 更新最近访问的经常使用工具
[COMMON_TOOLS](state, ary) {
localStorage.setItem("commonTools", JSON.stringify(ary));
state.commonTools = ary;
}
在组件页面获取记录ui
//获取最近访问的经常使用工具
getCommonTools() {
return this.$store.getters.getCommonTools
}
vue 商城浏览足迹_vue实现用户获取浏览记录功能相关推荐
- vue 商城浏览足迹_vue 移动端记录页面浏览位置的方法
记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流 描述: 假设有a b c 页面 从a页面 到 b页面 ,b页面到c页面 b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次 ...
- vue实现用户获取浏览记录功能
在路由配置文件设置一个属性用来判断当前路由是否需要记录,如要记录当前路由设置为ture memoryRouter: false //是否记忆当前路由为常用工具 {path: '/helloWorld' ...
- vue页面锚文本_Vue如何实现锚点定位功能?
整个链路应该是这样的,用户在消息中心中看到回复自己的信息,点进去后会跳到视频播放页面,页面url中会带上此次消息的replyId(就简称rid吧),然后接下来的问题就是有两个,一个是评论本身是分页的, ...
- Vue 公众号商城实现浏览足迹
一.HTML <div class="product-page" v-if="product" @touchstart="touchstart( ...
- Vue商城——首页功能
Vue商城项目的前提工作 用脚手架3创建项目 vue create 项目名称 在GitHub上建一个仓库 将项目与github联系起来 git init git add . git commit -m ...
- cookie记录用户的浏览商品的路径
在电子商务的网站中,经常要记录用户的浏览路径,以判断用户到底对哪些商品感兴趣,或者哪些商品之间存在关联. 下面将使用cookie记录用户的浏览过的历史页面.该网站将每个页面的标题保存在该页面的$TIT ...
- 浏览器获取浏览历史_浏览器历史的未来
浏览器获取浏览历史 by Patryk Adaś 通过PatrykAdaś 浏览器历史的未来 (The Future of Browser History) I am really unsatisfi ...
- Cookie获取用户的访问记录
使用Cookie技术 获取用户的访问记录 1.创建 虚拟数据 package com.oracleoaec.cookie;import java.util.HashMap;public class ...
- vue修改数据连接数据库_vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- 第三方应用商店仍为用户获取APP主渠道 细分市场或成新增长点
近年来,在应用分发市场领域随着渠道多元化趋势日渐显现,第三方应用商店似乎已经显得乏善可陈,缺少亮点.事实上,根据比达咨询(Big Data-Research)发布的<2016年第一季度中国第三方 ...
最新文章
- java 的lambda表达式
- Oracle Database 12c DBA文官手册(第8版)——第5章 开发和实现应用程序
- Python基础教程(五):数字、字符串
- 半编译半解释的Java语言和C++、Python等语言的区别
- boost::gil::channel_traits用法的测试程序
- 互联网人才流向说明了什么
- 单机最大负载_电流互感器允许接入的实际最大二次负载(注电案例1865)
- 博士女友的朋友圈都藏着什么秘密?
- php httprequest 安装,php实现httpRequest的方法
- 编程语言python入门-为什么说python是适合新手入门的编程语言
- 机器学习中的算法——决策树模型组合之随机森林与GBDT
- SAP表维护自动带出对象属性
- Android课题研究的主要观点,二、本课题的研究目标、研究内容、主要观点和创新之处.doc...
- 微信不显示王者荣耀连接服务器,王者荣耀省级不显示,王者荣耀不用微信怎么登录...
- Factors of Factorial
- Win10安装S32DS_ARM_V2018.R1
- git忽略已加入版本控制的文件
- 全国大学生智能汽车竞赛硬件篇(二)—电磁信号采集部分
- 丑数_题目1214:丑数
- 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)