關於vue-router,路由重定向的使用分析


看之前的項目,突然發現一個不算bug的bug,之前也是一直沒有想到,現在發現之后越來越覺得有必要改掉,

項目用的是vue做的,自然切換用的就是路由,一級路由包括:首頁、記錄和個人中心,二級路由是在記錄下面的三個報修記錄,

如上圖路由分配,一級路由重定向到index,二級重定向至repair,一直覺得這樣沒什么問題,結果有次突然點到第三方租賃頁,然后又點到個人中心,

這是呢,我又想看看剛剛租賃頁的信息,這時,由於路由重定向,自然出現的是報修頁,這樣理論上是沒有錯的,但是我不想這樣呀,所以我就用本地緩存localstorage

把二級路由存下來,想賦給二級路由的重定向,也就是把重定向的值改為一個變量,結果,存是存下來了,但是不會用,放什么地方都不對,然后我就開始翻官網,因為之前項目要得急,也是第一次用vue,

基本上是粗略看了一下,需要用到什么功能就研究下,夠做項目用就行,所以這次翻看還是很有收獲的,

 

 如圖,划橫線部分,重定向竟然還可以是一個方法,so,現在就好解決了,

把重定向的部分改為函數,然后判斷從localstorage讀到的內容,如果為空就默認跳repair,還跟原來一樣,如果有值的話,就按里面的值來跳,ok,完美解決。

后續添加:

有時項目中需要監聽路由,

得到當前的路由,路由信息已經得到,然后就可以利用了;

后續添加:

之前做滑到底部自動加載的功能時,同一父級的路由切換,需要用到最外層的div,然后會相互影響,

此時可以

mounted:function(){
  console.log(this);
  console.log(this.$el);
},

 輸出的this.$el,就是當前的頁面的最外層的div。

watch監聽$route ,也可已監聽事件

watch: {
    '$route':'fetchData'
},

methods:{

 fetchData:function(){

  alert('0');

}

}  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM