vue移动端写动态tadr切换与权限问题

第一. 准备

      安装  1.       npm i vant@latest-v2 -S    yarn add vant@latest-v2 -S

      创建所需 路由组件 组件必须为中转组件的子组件

第二 。在登录成功后获取tadr 切换列表  格式如下：

 vuex 中存储 代码如下：state中 

 

mutations中 

 actions 中

第三 ，app.vue 页面 methods 中

<template>

  <div id="app" class="home_page">

    <main>

      <router-view />

    </main>

    <footer v-if="tabbarshow">

      <van-tabbar v-model="tabbarActive" class="footer-bottom" z-index="9999">

        <van-tabbar-item

          v-for="(info, index) in tabbar"

          :key="index"

          :dot="info.dot"

          :badge="info.badge || ''"

          :name="info.url"

          :to="info.url"

        >

          <span>{{ info.text }}</span>

          <template #icon="props">

            <img

              class="tabbar-icon"

              :src="props.active || tabbarActive == info.url ? info.icon.active : info.icon.inactive"

            />

          </template>

        </van-tabbar-item>

      </van-tabbar>

    </footer>

  </div>

</template>

<script>

import { getroute } from "@comm/api/login";

export default {

  name: "App",

  provide() {

    return {

      getinit: {

        getinit: this.getinit

      }

    }

  },

  data() {

    return {

      getinit: this.init,

      // 显示与隐藏

      tabbarshow: false,

      // 显示组件

      tabbartrue: [],

      tabbarActive: "",

      tabbar: this.$store.getters.addRoute || [],

    }

  },

  watch: {

    $route: {

      handler(val) {

        if (this.tabbartrue.indexOf(val.name) == -1) {

          this.tabbarshow = false

        } else {

          this.tabbarshow = true

        }

        this.tabbarActive = val.path

      },

      immediate: true,

    },

  },

  created() {

    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem("userMsg")))); //解决vuex 刷新丢失问题

    window.addEventListener("beforeunload", () => { localStorage.setItem("userMsg", JSON.stringify(this.$store.state)) })

    try {

      this.tabbar = this.$store.getters.addRoute

      if (this.tabbartrue.indexOf(this.$route.name) == -1) {

        this.tabbarshow = false

      } else {

        this.tabbarshow = true

      }

      this.tabbarActive = this.$store.getters.addRoute[0].url

      this.$store.getters.addRoute.map((v, index) => {

        if (index == 0) {

          this.tabbarActive = v.url

        }

        this.tabbartrue.push(v.name)

      })

    } catch {

      console.log("初始化");

    }

  },

  methods: {

    init() {

      if (!this.$store.getters.addRoute.length) {

        getroute().then((v) => {

          this.$store

            .dispatch("AddRouter", v)

            .then(() => {

              this.tabbar = this.$store.getters.addRoute

              if (this.tabbartrue.indexOf(this.$route.name) == -1) {

                this.tabbarshow = false

              } else {

                this.tabbarshow = true

              }

              this.tabbarActive = this.$store.getters.addRoute[0].url

              if (!(this.tabbarActive == this.$store.getters.addRoute[0].url)) {

                this.$forceUpdate()

              }

              this.$store.getters.addRoute.map((v, index) => {

                if (index == 0) {

                  this.tabbarActive = v.url

                }

                this.tabbartrue.push(v.name)

              })

              this.$router

                .push({ path: this.$store.getters.addRoute[0].url })

                .catch(() => { })

            })

        })

      } else {

        this.tabbar = this.$store.getters.addRoute

        if (this.tabbartrue.indexOf(this.$route.name) == -1) {

          this.tabbarshow = false

        } else {

          this.tabbarshow = true

        }

        this.tabbarActive = this.$store.getters.addRoute[0].url

        this.$store.getters.addRoute.map((v, index) => {

          if (index == 0) {

            this.tabbarActive = v.url

          }

          this.tabbartrue.push(v.name)

        })

      }

    }

  }

}

</script>

<style lang="scss" scoped>

.home_page {

  box-sizing: border-box;

  min-height: 100%;

  // background-color: $color-bg-primary;

  main {

    height: 100vh;

    overflow: auto;

  }

  .footer-bottom {

    display: flex;

    justify-content: space-around;

  }

}

</style>

第四，

做一中转页 在中转中调用app.vue  中方法init（）并跳转后端传的首页代码如下

 

 if (getToken()) {

      this.getinit.getinit()

    }

    try {

      if (this.$route.path != this.$store.getters.addRoute[0].url) {

        this.$router.push({

          path: this.$store.getters.addRoute[0].url

        })

      }

    } catch {

      console.log();

    }