Solve the problem that the tabbar navigation at the bottom of vantui does not correspond to the page (window.loading.hash)

Preface

One need is to use vant Bottom tabbr Components , collocation vueRouter, Implement route navigation . Custom icon required , And the selected icon should change the selected style .vantui It provides a routing mode tabbar Of , But it doesn't seem to support custom icons . So the method in the figure below is used ：

After using , Find a problem , That is, if you enter the secondary page , That is to say, it does not include tabbar Component page , Then the currently selected tabbar Item is lost , Will change back to the default 0, So you must leave tabbar When the component is on the page , Remember the currently selected tabbar Item or determine the current route , Re initialize according to the route tabbar The corresponding active. Convenience , I chose the latter .

solve

  created() {
    
    /* Solve the problem of entering the secondary route and returning to the default selected home page tab The problem of */
    const navBarActive = window.location.hash;
    if(navBarActive.includes("#/home")){
    
      this.active = 0;
    } else if(navBarActive.includes("#/baike")){
    
      this.active = 1;
    } else if(navBarActive.includes("#/mall")){
    
      this.active = 2;
    } else if(navBarActive.includes("#/cart")){
    
      this.active = 3;
    } else if(navBarActive.includes("#/me")){
    
      this.active = 4;
    }
  }

vue-router Is based on window.loaction Of hash Property to implement , So every time I go back to the main page , Including tabbar When the page of the component , Determine the address corresponding to the current page hash, And then one by one and the corresponding tabbar Compare the corresponding routes , If meet , Just select the corresponding tabbar term , That is to active assignment . The reason why it is not used here switch To judge , Because the page address may have parameters , So not directly navBarActive Make an equal judgment with the route , It's the relationship involved .

At the end

because vue-router Is based on window.location Of hash Attribute , So many routing related problems can be solved from window.location Starting with . Print out... On the console window.location:

You can see information about the current page address ,hash The attribute actually corresponds to the route of the corresponding page we configured , We can also go through window.location.href To change the page address .