vue点击浏览器的返回按钮失效_Vue <浏览器后退点击导航栏样式不照应问题>

首先你需要封装一个公共的组件，我这里是 FooterMenu.vue

image.png

//FooterMenu.vue 的代码 ,通过 path来判断

image.png

class="f-item"

v-for="(n,index) in Nav"

:key="index"

:class="{active:TabNav === n.router}"

@click="skip(index)"

>

class="iconfont"

:class=" TabNav == n.router ? n.activeIcon : n.noIcon"

>

{{n.text}}

export default {

name: "footer-menu",

data() {

return {

// active: "index",

isshow:true,

TabNav: this.$route.path,

Nav: [

{ text: "首页", router: "/",activeIcon:'icon-shouyexuanzhong-',noIcon:'iconfont icon-shouye' },

{ text: "资产", router: "/property",activeIcon:'icon-zichanxuanzhong-',noIcon:'iconfont icon-zichan1' },

{ text: "我的", router: "/userCenter",activeIcon:'icon-wodexuanzhong-',noIcon:'iconfont icon-wode' }

]

};

},

methods: {

skip(index) {

console.log(this.$route.path)

this.$router.push({

path:this.Nav[index].router

});

this.TabNav = this.Nav[index].router;

}

},

created(){

console.log(this.$route.path)

}

};

//....

//在用到的页面内这样写(如果直接在App.vue 里面引用会不生效)

import footermenu from '@/components/common/FooterMenu'

components: {

footermenu

},