Needless to say, here is my own vue mobile top navigation component to share with you, dynamic binding background color, font color, and fallback icon. Take what you need and put it in the project

HTML

<template>
  <div class="appraisalTooBar" :style="{background:bgColor, opacity:bgOpacity}">
   <div class="left_box"  @click="backApp()">
     <img class="appraisal_img" :src="ImgSrc" alt=""/>
   </div>
    <p class="appraisal_title" :style="{color:titleColoe}">{{title}}</p>
    <div class="appraisal_text"
         @click="handleShare"
         :style="{color:rightTextColor}">{{rightText}}</div>
  </div>
</template>

JS

<script>
//Because the fallback key needs to determine which end will be fallback to which layer, it needs to introduce the verification tool class that I encapsulated before. You can watch a blog and use it directly if you don't know.
[Verify tool class encapsulation of different devices](https://mp.csdn.net/postedit/82889807)
  import {method} from '../../router/numberUtil' //Adapt to different mobile devices and tools
  export default {
    name: "appraisalbar",
    props:{  Here is a page that I need to click on the upper right corner of the text to share, and need to interact with the native, so I pass parameters to the parent component, and the child component accepts this parameter, so you need to keep it without deleting it
      shareData:Object
    },
    data(){
      return {
        isBack:true, // Fallback defaults to true
        ImgSrc:'', //Fallback picture
        title:'', // Middle text
        rightText:'', //Right text
        bgColor:'', //Navigation background color
        titleColoe:'',//Middle text color
        rightTextColor:'',//Right text color
        bgOpacity:'',//Transparency of background color
      };
    },
    methods:{
		//   Define the parameters that the method accepts from the caller, that is, which page needs to call the navigation component and which page will call the method to pass values
      discoverFun(data){
        this.isBack = data.isBack;
        this.title = data.title;
        this.rightText = data.rightText;
        this.ImgSrc = data.ImgSrc;
        this.bgColor = data.bgColor;
        this.titleColoe = data.titleColoe;
        this.rightTextColor = data.rightTextColor;
        this.bgOpacity = data.bgOpacity;
      },
      //Regression
      back(){ //Upper left corner fallback method
        if(this.isBack==true){ //Judge if it is true and back to App
          this.backApp()
        } else { //Otherwise, go back to the next level
          this.$router.back(-1)
        }
      },
    //The way to adjust the original here is backward
      backApp(){
        if(method.verifyAndroid()){ //Android
          window.webUser.backWeb();
        } else if(method.verifyIos()){//ios
          window.webkit.messageHandlers.backWeb.postMessage(null);
        } else if(window.__wxjs_environment){//WeChat
          wx.miniProgram.navigateTo({url: 'pages/index/index'})
        } else {
          this.$router.back(-1)
        }
      },
      
    // Sharing method in the upper right corner of personal Center / / this is the sharing method I used. Unnecessary deletion
      handleShare(){ //Define the parameters that the method accepts from the caller
        let object = {
            "url":this.shareData.url,
            "title":this.shareData.title,
            "text":this.shareData.text,
            "imageUrl":this.shareData.imageUrl,
          };
          console.log(object);
          if(method.verifyAndroid()){
            window.webUser.shareUserCenter(JSON.stringify(object));
          } else if(method.verifyIos()){
            window.webkit.messageHandlers.ggxShareUrl.postMessage(object);
          }
      }
    }
  }

</script>

CSS

<style lang="stylus" rel="stylesheet/stylus">

  .appraisalTooBar
    position: fixed;
    display flex
    width: 100%;
    top: 0px;
    align-items: center;
    z-index: 100;
    height 1.2733rem
    width 100%
    font-size 0.48rem
    .appraisal_img
      padding 0 0.24rem
      width 0.64rem
      height 0.64rem
      vertical-align middle

    .appraisal_title
      margin auto
      font-size 0.53rem
      padding-right 1.2rem
    .appraisal_text
      position absolute
      padding 0.08rem
      right 0.24rem;
      font-size 0.4rem
</style>

Well, the whole component is just these codes, some of which don't need to be deleted by myself. I have written all the codes that can be deleted clearly / send me a private letter if necessary!

The following is the method of using components, that is, which page needs to reference and pass the corresponding parameters: look at the code

HTML

<template>
 <!--
 Step 3: use components and define ref attribute to pass parameters to sub components through ref attribute 
 shareData here is the sharing method defined by me. Through this method, you can transfer values to subcomponents and delete them unnecessarily
 -->
  <appraisalbar ref="personBar" :shareData="shareData"></appraisalbar>
</template>

JS

<script>
// Step 1: introduce components first
 import appraisalbar from '../appraisal/appraisalbar';
  export default {
      name: "personalPage",
      //Step 2: declare components
      components:{
        appraisalbar,
    },
    data(){
         return{
         }
      },
      
 mounted(){ // This is how the whole top navigation is used. I used it in my own project in created. Don't delete it. You can keep it if you need it. Then change it to your own method and parameter name.
 
 //Step 4: use the $refs method in the hook function where the page is hung to call the method of the subcomponent to pass parameters. Here is what you want to pass. What you pass in is what you want to show
 // this.$refs.personBar uses the properties defined in ref above to pass values to the subcomponent. discoverFun. discoverFun is a method defined by subcomponent. Don't understand. Look at the above component / / the following parameters need not be passed, just leave "" blank
        this.$refs.personBar.discoverFun({ 
          isBack:false, // true for fallback to app false for fallback to the next level, do it according to your own needs
          ImgSrc:require('../../assets/news/icon_back_bai.png'),//Left fallback Icon
          title:'Personal Center',// Middle title
          rightText:'share',//Right text
          bgColor:' #FF7E00 ', / / background color
          bgOpacity:'1',//transparency
          titleColoe:'#FFFFFF ', / / font color of middle title
          rightTextColor:'#FFFFFF ', / / color of text on the right
        });
      },
      created(){
      //Here is what I have defined for sharing on the right side. What I don't need is to delete all of the following parts. What's above is the use process of all the top navigation
      //The resource obtains the information passed by the subcomponent and saves the user information
        getUserInfo(userInfo){
          if(userInfo){
            this.user = userInfo;
            this.shareData={
              'url':this.url,
              'title':this.user.nickname +'In the advertising industry, you can see the credit rating!',
              'text':'The old driver takes you to play the advertisement man. The order is continuous and the reward is rich. You can take work nearby, work, use it for free, and get a chance to win a prize!',
              'imageUrl':''
               };
           }
      },
}
</script>

All right. The whole top navigation is finished. If you think it's useful, you can use it directly. Change the parameter and method name according to your own needs. If you need to know more, please enter this website
https://www.jianshu.com/u/6d942b85941d