1. 程式人生 > >vue-router ---- 解決頁面重新整理和路由改變時導航條樣式問題

vue-router ---- 解決頁面重新整理和路由改變時導航條樣式問題

問題:

  1.當我們在使用路由時,如果有導航條此時,我們在url位址列目改變路由地址,此時路由內容更改但,導航條樣式沒有隨著改動

  2.當頁面重新整理時,url導航位址列的路由和當前頁面顯示的不一致

解決:

 1.通過watch監聽路由地址的改變

 2.使用鉤子函式,改變路由

  export default {
    name: 'App',
    data(){
      return {
        msg:'App.vue',
        currentRouter:'/'
      }
    },
    methods:{
     
    },
    watch:{
      '$route':function(to,from){
          this.currentRouter=to.path;
      }
    },
    beforeMount(){
        this.currentRouter=this.$route.path;
    }
  }

**: 上面的程式碼,要放在跟路由頁面中