vuex与route结合使用

系统管理员 2022-12-21 04:41 318阅读 0赞

## vuex与route结合使用 ##

使用场景：  
                1：页面需要统一处理工具栏显示隐藏

2：页面需要字段判断一些特殊页面特殊功能

***方法：一、使用route的props属性，不同页面传入props变量标识 ，结合beforeRouteEnter使用，获取页面单独props获取参数  
           二、使用在beforeEach构造中调用vuex，根据不同页面改变state变量标识(beforeEach该钩子，不能获取this实例)***

***           三、使用beforeRouteEnter（可获取this实例）结合全局Vun.mixin()，  
  
方法一与方法二：***

/* jshint esversion: 6 */
    import Vue from 'vue';
    import VueRouter from 'vue-router';
    import Home from '../views/Home.vue';
    import store from '../store';
    
    Vue.use(VueRouter);
    const showTabRoute = ['Home', 'Warn','Inspect','Task'];// 需要显示tabBar的路由，匹配routes文件name
    
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home,
        
        props: { showTab: true },// 方法一：
        meta: { title: '系统巡检', keyword: 'home-list', description: '系统巡检' },
      },
      {
        path: '/workOrder',
        name: 'WorkOrder',
        component: () => import('../views/WorkOrder.vue'),
      },
      {
        path: '/task',
        name: 'Task',
        props: { showTab: true },
        component: () => import('../views/Task.vue'),
      },
      {
        path: '/inspect',
        name: 'Inspect',
        props: { showTab: true },
        component: () => import('../views/Inspect.vue'),
      },
      {
        path: '/warn',
        name: 'Warn',
        props: { showTab: true },
        component: () => import('../views/Warn.vue'),
      },
      {
        path: '/systemTask',
        name: 'SystemTask',
        component: () => import('../views/SystemTask.vue'),
      },
      {
        path: '/maintenancePlan',
        name: 'MaintenancePlan',
        component: () => import('../views/MaintenancePlan.vue'),
      },
      {
        path: '/automaticTask',
        name: 'AutomaticTask',
        component: () => import('../views/AutomaticTask.vue'),
      },
      {
        path: '/controlStrategy',
        name: 'ControlStrategy',
        component: () => import('../views/ControlStrategy.vue'),
      }
    
    
    ];
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    });
    
    // 方法二
    router.beforeEach((to, from, next) => {
      store.commit('SET_SHOW_TAB', showTabRoute.includes(to.name));// 是否显示tab-bar
      /* 路由发生变化修改页面title */
      if (to.meta.title) {
        document.title = to.meta.title;
      }
      next();
    });
    
    export default router;

**方法三：全局mixin**

// 方法三：
    // 配置页面tabBar的显示隐藏
    const noTabBarPages=['Home','Warn','Inspect','Task'];
    export const mixin={
        props:['showTab'],// 在全局mixin中获取不到props
        data(){
            return{
            }
        },
        beforeRouteEnter (to, from, next) {
            next(vm => {
              // 通过 `vm` 访问组件实例
              if(noTabBarPages.includes(to.name)){// 方法三
                vm.$store.commit('SET_SHOWTABBAR',true);
              }else{
                vm.$store.commit('SET_SHOWTABBAR',false);//
              };
              // 通过router传入的props,只能通过routes钩子函数this实例中获取，和页面中this获取
              // 方法一：
              // vm.$store.commit('SET_SHOWTABBAR',vm.showTab);// 方法一
              console.log('beforeRouteEnter：vm:',noTabBarPages,vm.showTab);
            })
        }
    };

// main.js导入全局mixin
    import {mixin} from '@/mixins/index';
    
    Vue.mixin(mixin);

全局tabBar显示隐藏App.vue：

<template>
      <div id="app">
        <div class="fixed-head-bg"></div>
        <router-view />
        <tabBar v-if="showTabBar"/>
      </div>
    </template>
    <script>
    import "@/assets/common.css";
    import {mapState} from'vuex';
    import tabBar from "@/components/tab-bar";
    export default {
      components: {
        tabBar
      },
      computed:{
        ...mapState(['showTabBar'])// 控制显示隐藏
      },
      data() {
        return {};
      }
    };
    </script>
    
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      height: 100vh;
      width: 100vw;
    }
    .fixed-head-bg{
      position: fixed;
      top:0;
      left:0;
      right:0;
      height: 50px;
      background: #f97b2c;
      z-index: 0;
    }
    
    </style>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201116155116476.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhaGFoaGFoYWhhaGhhMTIzNDU2_size_16_color_FFFFFF_t_70 1]: /images/20221120/65d19a1dfd0e4a828cd63dbe009ab310.png