vue 移动端渲染菜单 及 顶部header的问题

Question

求助一下，在做移动端的顶部header 和 底部的tab时 ，我打算是通过权限匹配路由，把有权限的顶部tab渲染出来，不知道这样的思路是否可取？ 然后如果采取这样的方式的话，我应该是通过 created 去处理 ，还是通过 mounted还是需要在其他流程节点上做处理呢？
还有顶部的header，要怎么判断它是否显示右侧的搜索、左侧的返回等等这些按钮呢？目前这里有点卡主

Answer 1

可以在进入页面的时候就让用户登录(或根据本地信息判断是否已登陆)，然后根据登录后返回的用户信息，配置你的一些权限，或者就直接由后台把这些信息返回给你,然后把这些信息保存下来，供后面的功能使用。如：

{
    username:'test',
    userid:1,
    route:[{
        path:'xx/x',
        hassearch:true,
        hasback:false
    }]
}

Answer 2

header定义组件 传值就行

sunComponents.vue

<template>
  <div id='default'>

    <div>
      <p>logo</p>
      <p v-if="show">搜索</p>
    </div>

  </div>
</template>


<script>
export default {
  prop: {
    show: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {};
  },
  created() {},
  methods: {}
};
</script>


<style lang='scss'>
</style>

father.vue

<template>
    <div>
        <sub :show='show'></sub>
    </div>
</template>


<script>
import sub from "./sunComponents";
export default {
  data() {
    return {
      show:false
    };
  },
  created() {},
  methods: {}
};
</script>


<style lang='scss'>
</style>

Answer 3

涉及到用户身份，适用全局存储，建议用 Vuex，过程大概是这样的：

1. 启动时请求接口获取用户身份和权限信息，并保存在全局变量里
2. 组件将这些信息整合进 computed 渲染

至于后退键，应该根据路由来判断了，比如详情页返回列表页，列表页返回首页等。