關於vue路由監聽事件跳轉的問題

Posted on by

vue路由監聽事件跳轉

1.監聽路由觸發事件的語法

 watch: {
    $route: function clearSelectionRow() {
      console.log("success");
      this.$emit("setSelectionFile", []);
    },
  }

代碼實現功能：當本頁面路由發生變化的時候，執行回調函數clearSelectionRow()；

2.可能遇到的問題

①$route後接函數，函數可以是現定義的，也可以是在methods方法中已經定義完成的；

②監聽watch封裝在最底層的組件的時候，註意跳轉後該組件是否摧毀重建；如果被摧毀重建，路由監聽觸發事件將不執行，摧毀重建：一個組件調用兩次分別顯示，在頁面上無區別，但是是同意組件的再次渲染，定義在該組件上的路由變化將監聽不到。

解決方法：將路由監聽放在一直不變的主頁面index.vue上.

③當需要在同一屬性下執行多個回調函數的時候，將函數以對象的形式放在數組中

$route: [
      function clearSelectionRow() { //回調函數1
        this.$emit("setSelectionFile", []);
      },
      {//回調函數2
        handler(route) {
          
      },
    ],

vue路由監聽不到怎麼辦

最近在使用vue項目的時候發現我們使用的watch監聽不到$route的變化，查瞭很多文檔最終終於找到解決辦法。

方法一

路由包含子路由

{
  name: 'home',
  component: Home,
  path: '/home',
  children: [
    {
      path: 'main',
      name: 'main',
      component: Main,
    },
    {
      path: 'login',
      name: 'login',
      component: Login,
    },
  ]
}

在幾個子路由之間跳轉就能保證監聽到路由變化

方法二

監聽$route.path對象

watch: {
    "$route.path":{
      handler(to, from) {
        console.log('to:::', to);
        console.log('from:::', from);
      },
      deep: true
    }
  }

如果我們的路由沒有子路由，想要實現監聽可以使用$route.path進行深度監聽，這樣也能監聽到路由變化瞭。

方法三

使用vue自帶的路由守衛beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave

beforeRouteEnter (to, from, next) {
    next(vm => {
        // 通過 `vm` 訪問組件實例
      })
  },
  beforeRouteUpdate (to, from, next) {
  },
  beforeRouteLeave (to, from, next) {
  }

據說還能通過設置keep-alive來保證路由被監聽到，這個我最近還沒用的，有用過的小夥伴可以分享一下。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：