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

在路由配置文件设置一个属性用来判断当前路由是否需要记录，如要记录当前路由设置为ture

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文件中，路由守卫里添加本地缓存保存路由浏览记录；

// 全局路由守卫
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文件，在这里加上

 //获取最近访问的常用工具
    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;
    }

在组件页面获取记录

//获取最近访问的常用工具
            getCommonTools() {
                return this.$store.getters.getCommonTools
            }