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>

</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>

</style>

Answer 3

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

1. 启动时请求接口获取用户身份和权限信息，并保存在全局变量里

2. 组件将这些信息整合进 computed 渲染

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