vuejs中三级Tab切换并刷新页面时保持当前激活状态,使用query或params结合本地存储实现(内含视频)...-CSDN博客

本文链接：https://blog.csdn.net/wzc_coder/article/details/126899957

本文介绍了在VueJS中如何处理三级Tab切换，并在刷新页面时保持当前激活状态。通过结合query参数、params和本地存储来实现，详细讲解了路由配置、动态组件渲染以及解决路由切换状态丢失的问题。同时还探讨了使用localStorage保持状态的方法，强调在复杂路由层级下，动态组件渲染的优势。

摘要由CSDN通过智能技术生成

前言

之前有介绍过vuejs中的路由的传参及路由的props配置,对于如何配置一级路由,二级路由,对于很多同学来说,基本上没什么难度

然后在配置三级路由以上的时候,往往却没那么容易,会出现一些问题

比如:如下的,二级路由下的tab选项页,当刷新页面时,还能保持当前tab的一个状态

在切换到其他路由后,在回到当前路由,依旧能保证上一个状态等

配置一级二级路由

这里我使用的是基础模板:vue-admin-template,搭建的一个简易后台管理系统,在views/fontend/index.vue创建一个index.vue组件

并使用elementUI组件中的按钮样式的单选组合,实现一个tab按钮选项按钮的切换

以下是fontend/index.vue示例代码

<template>
    <div class="wrap">
        <el-radio-group v-model="activeTab" @change="handleRadio">
            <el-radio-button v-for="item in lists" :key="item.name"  :label="item.name">{
   {item.name}}</el-radio-button>
        </el-radio-group>     
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        name: 'FontEnd',
        data(){
            return {
              activeTab: '',
              lists: [
                {
                    // path: '/fontend/html',  
                    name: 'html'
                },
                {
                    // path: "/fontend/javascript",
                    name: 'javascript'
                },
                {
                    // path: "/fontend/css",
                    name: "css"
                }
              ]
           };
        },
        methods: {
            handleRadio(val) {
                this.$router.push({
                    name: val
                })
            }
        },
        watch: {
            $route: {
                handler(val) {
                    console.log(val);
                    this.activeTab = val.name;
                },
                immediate:true
            }
        }
    }
</script>
<style lang="scss" scoped>
.wrap {
    padding: 30px;
}
</style>

在上面的模板代码中,使用了elementUI中的单选按钮组合组件el-radio-group,并结合v-for指令循环遍历了一个数组

同时在点击按钮时,绑定了一个change事件,使用编程式导航this.$router.push({})控制按钮路由的跳转

router.js路由配置

如下是router.js路由配置

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
export const constantRoutes = [
  
  {
    path: '/fontend',
    component: Layout,
    name:'Font',
    children: [
      {
        path: '',
        component: () => import('@/views/fontend/index'),
        hidden: true,
        redirect: '/fontend/html',
        // meta: { title: '前端', icon: 'nested' },
        children: [
          {
            path: 'html',
            name: 'html',
            component: () => import("@/views/fontend/html.vue"),
            meta: {
              title: 'html'
            }
          },
          {
            path: 'javascript',
            name: 'javascript',
            component: () => import("@/views/fontend/javascript.vue"),
            meta: {
              title: 'javascript'
            }
          },
          {
            path: 'css',