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

}