在路由配置文件设置一个属性用来判断当前路由是否须要记录,如要记录当前路由设置为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实现用户获取浏览记录功能相关推荐

  1. vue 商城浏览足迹_vue 移动端记录页面浏览位置的方法

    记录一下本次项目我使用的方法,有更简单便捷的方法,欢迎交流 描述: 假设有a b c 页面 从a页面 到 b页面 ,b页面到c页面 b到c页面的时候需要记录当前b的浏览位置,c返回到b的时候滚动到上次 ...

  2. vue实现用户获取浏览记录功能

    在路由配置文件设置一个属性用来判断当前路由是否需要记录,如要记录当前路由设置为ture memoryRouter: false //是否记忆当前路由为常用工具 {path: '/helloWorld' ...

  3. vue页面锚文本_Vue如何实现锚点定位功能?

    整个链路应该是这样的,用户在消息中心中看到回复自己的信息,点进去后会跳到视频播放页面,页面url中会带上此次消息的replyId(就简称rid吧),然后接下来的问题就是有两个,一个是评论本身是分页的, ...

  4. Vue 公众号商城实现浏览足迹

    一.HTML <div class="product-page" v-if="product" @touchstart="touchstart( ...

  5. Vue商城——首页功能

    Vue商城项目的前提工作 用脚手架3创建项目 vue create 项目名称 在GitHub上建一个仓库 将项目与github联系起来 git init git add . git commit -m ...

  6. cookie记录用户的浏览商品的路径

    在电子商务的网站中,经常要记录用户的浏览路径,以判断用户到底对哪些商品感兴趣,或者哪些商品之间存在关联. 下面将使用cookie记录用户的浏览过的历史页面.该网站将每个页面的标题保存在该页面的$TIT ...

  7. 浏览器获取浏览历史_浏览器历史的未来

    浏览器获取浏览历史 by Patryk Adaś 通过PatrykAdaś 浏览器历史的未来 (The Future of Browser History) I am really unsatisfi ...

  8. Cookie获取用户的访问记录

    使用Cookie技术  获取用户的访问记录 1.创建 虚拟数据 package com.oracleoaec.cookie;import java.util.HashMap;public class ...

  9. vue修改数据连接数据库_vue实现数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  10. 第三方应用商店仍为用户获取APP主渠道 细分市场或成新增长点

    近年来,在应用分发市场领域随着渠道多元化趋势日渐显现,第三方应用商店似乎已经显得乏善可陈,缺少亮点.事实上,根据比达咨询(Big Data-Research)发布的<2016年第一季度中国第三方 ...

最新文章

  1. java 的lambda表达式
  2. Oracle Database 12c DBA文官手册(第8版)——第5章 开发和实现应用程序
  3. Python基础教程(五):数字、字符串
  4. 半编译半解释的Java语言和C++、Python等语言的区别
  5. boost::gil::channel_traits用法的测试程序
  6. 互联网人才流向说明了什么
  7. 单机最大负载_电流互感器允许接入的实际最大二次负载(注电案例1865)
  8. 博士女友的朋友圈都藏着什么秘密?
  9. php httprequest 安装,php实现httpRequest的方法
  10. 编程语言python入门-为什么说python是适合新手入门的编程语言
  11. 机器学习中的算法——决策树模型组合之随机森林与GBDT
  12. SAP表维护自动带出对象属性
  13. Android课题研究的主要观点,二、本课题的研究目标、研究内容、主要观点和创新之处.doc...
  14. 微信不显示王者荣耀连接服务器,王者荣耀省级不显示,王者荣耀不用微信怎么登录...
  15. Factors of Factorial
  16. Win10安装S32DS_ARM_V2018.R1
  17. git忽略已加入版本控制的文件
  18. 全国大学生智能汽车竞赛硬件篇(二)—电磁信号采集部分
  19. 丑数_题目1214:丑数
  20. 520情人节送女朋友的3D相册礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)

热门文章

  1. elasticsearch使用中文分词器和拼音分词器,自定义分词器
  2. elasticsearch-7.15.2 配置IK中文分词器+拼音分词
  3. “symbol lookup error”
  4. 怎样运用好iMindMap中的虚线箭头
  5. 怎样将生成的pdf文件转为eps文件
  6. impala COMPUTE STATS 指令
  7. SQL查询条件传入参数为空查询全部数据,不为空指定查询,可选参数查询
  8. JS实现拼音搜索汉字(支持首字母匹配)
  9. java获取当前学期
  10. 工业级三维扫描仪关于扫描前喷粉技巧,你了解多少?