js获取radio选中的值_vue中页面刷新tabs导航保持选中项不变

问题描述：

Vue框架中PC端页面刷新时，导航选中项会默认刷新

实现效果：

实现页面刷新，导航选中项保持不变的效果

注：实例中使用到element-ui组件库中tabs

推荐使用 npm 的方式安装：npm i element-ui -S

下面是具体实现代码
Main.js文件中：主要是引入注册element-ui，如下：

 1import Vue from 'vue'
 2import App from './App.vue'
 3import router from "./router";
 4// 引入element UI
 5import Element from 'element-ui'
 6// 引入样式
 7import 'element-ui/lib/theme-chalk/index.css';
 8// 注册
 9Vue.use(Element)
10import axios from "axios";
11Vue.prototype.$axios = axios;
12Vue.config.productionTip = false
13new Vue({
14  router,
15  render: h => h(App),
16}).$mount('#app')

App.vue文件：主要是注册home组件(导航组件)如下：

 1<template>
 2  <div id="app">
 3    <Home>Home>
 4  div>
 5template>
 6<script> 7// 导航页面组件 8import Home from './components/Home.vue' 9export default {10  name: 'App',11  components: {12    Home13  }14}15script>
16<style>17#app {18  font-size: 16px;19  width: 1920px;20}21style>

Home.vue文件：主要导航实现部分-如下：

  1<template>
  2      
  3    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
  4      <el-tab-pane label="用户管理" name="a">
  5        <User>User>
  6      el-tab-pane>
  7      <el-tab-pane label="配置管理" name="b">
  8        <Config>Config>
  9      el-tab-pane>
 10      <el-tab-pane label="角色管理" name="c">
 11        <Role>Role>
 12      el-tab-pane>
 13      <el-tab-pane label="定时任务补偿" name="d">
 14        <Task>Task>
 15      el-tab-pane>
 16    el-tabs>
 17template>
 18
 19<script> 20import User from "./User";    //引入用户管理界面 21import Config from "./Config";    //引入用户配置 22import Role from "./Role";    //引入用户角色 23import Task from "./Task";    //引入用户任务 24 export default { 25    data() { 26      return { 27        //activeName 是默认选中的tab 28      //这里默认展示第一个tab 29       activeName: 'a'     30      }; 31    }, 32    components: { 33        User,    //注册各个组件 34        Config, 35        Role, 36        Task 37    }, 38     created() { 39      //页面加载前，根据url判断显示页面 40        this.updateType(); 41    }, 42     methods: { 43        //点击切换tab时根据标签名的不同将url中的参数值改掉 44        handleClick(tab) { 45          // console.log(tab.name)  会获取tab中name值  a,b,c,d 46            let queryType;     //url中的锚点 47            if(tab.name == 'a') { 48                queryType = 1; 49            }else if(tab.name == 'b') { 50                queryType = 2; 51            }else if(tab.name == 'c') { 52                queryType = 3; 53            }else if(tab.name == 'd') { 54                queryType = 4; 55            } 56        //将新的值和url放在一起拼成一个完整的路径 57            this.$router.push({ 58                path: '', 59                query: { 60                    type: queryType || 1 61                } 62            }); 63        }, 64        // 根据网址中url来判断显示页面 65         updateType() { 66          //  通过location.search拿到url后的部分?type=* 67            let type = location.search; 68            //通过拿到的值不同，更改activeName的值 69            if(type === '?type=1') { 70              // activeName 是默认选中的tab的name 71                this.activeName = 'a';    72            }else if(type === '?type=2') { 73                this.activeName = 'b'; 74            }else if(type === '?type=3') { 75                this.activeName = 'c'; 76            }else if(type === '?type=4') { 77                this.activeName = 'd'; 78            } 79         }, 80    }, 81  }; 82script>
 83<style > 84  .el-tabs__nav-scroll{ 85  background: rgb(0, 73, 102); 86   position:fixed; 87   z-index: 999; 88   width: 100%; 89   top:0; 90  } 91  .el-tabs.el-tabs--border-card>.el-tabs__header .el-tabs__item { 92    color: #fff; 93  } 94 95  .el-tabs.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active  { 96    color: #000; 97  } 98  #app .el-tabs .el-tabs__content{ 99  padding: 0;100}101style>

Router文件下index.js文件：路由导航-如下：

 1import Vue from "vue";
 2import VueRouter from "vue-router";
 3Vue.use(VueRouter);
 4const routes = [
 5  // 访问/直接跳转到/home
 6  // {
 7  //   path: '/',redirect:'/home'
 8
 9  // },
10  {
11    path: "",
12    // name: 'Exam',
13    component: () =>
14      import(/* webpackChunkName: "about" */ "../components/User.vue"),
15  },
16//   {
17//     path: "",
18//     // name: 'Exam',
19//     component: () =>
20//       import(/* webpackChunkName: "about" */ "../components/AdbodyLogin.vue"),
21//   },
22];
23const router = new VueRouter({
24  mode: "history",
25  base: process.env.BASE_URL,
26  routes,
27});
28export default router;

以上是实现页面刷新tabs保持不变的效果，可以根据实际项目需求进行代码的扩展和其他功能的开发。

记录个人开发中的问题和解决方法

希望文章对遇到同样问题的小伙伴有所帮助

喜欢的可以关注一下