vue2：Vant底部导航栏记录active，刷新页面记录active的值

最新推荐文章于 2024-09-15 08:30:50 发布

朱同學8245

最新推荐文章于 2024-09-15 08:30:50 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_46212682/article/details/123313185

版权

话不多说，直接上代码

<template>
  <div>
    <router-view/>
    <van-tabbar v-model="active" @change="change" fixed>
        <van-tabbar-item icon="home-o">
            <router-link to="/L1">标签</router-link>
        </van-tabbar-item>
        <van-tabbar-item icon="search">
            <router-link to="/L2">标签</router-link>
        </van-tabbar-item>
        <van-tabbar-item icon="friends-o">
            <router-link to="/L3">标签</router-link>
        </van-tabbar-item>
        <van-tabbar-item icon="setting-o">
            <router-link to="/L4">标签</router-link>
        </van-tabbar-item>
   </van-tabbar>
  </div>
</template>

<script>
export default {
    data() {
        return {
            active:0
        }
    },
    // 刷新页面的时候自动执行获取存储在localStorage的值
    created(){
        this.active = JSON.parse(localStorage.getItem('active'));
    },
    methods: {
        change(e){
            localStorage.setItem('active', e)
        }
    },
}
</script>

<style>

</style>