關(guān)于vue路由監(jiān)聽(tīng)事件跳轉(zhuǎn)的問(wèn)題

更新時(shí)間：2022年08月05日 15:34:02 作者：任性飛翔

這篇文章主要介紹了關(guān)于vue路由監(jiān)聽(tīng)事件跳轉(zhuǎn)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue路由監(jiān)聽(tīng)事件跳轉(zhuǎn)

1.監(jiān)聽(tīng)路由觸發(fā)事件的語(yǔ)法

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

代碼實(shí)現(xiàn)功能：當(dāng)本頁(yè)面路由發(fā)生變化的時(shí)候，執(zhí)行回調(diào)函數(shù)clearSelectionRow()；

2.可能遇到的問(wèn)題

①$route后接函數(shù)，函數(shù)可以是現(xiàn)定義的，也可以是在methods方法中已經(jīng)定義完成的；

②監(jiān)聽(tīng)watch封裝在最底層的組件的時(shí)候，注意跳轉(zhuǎn)后該組件是否摧毀重建；如果被摧毀重建，路由監(jiān)聽(tīng)觸發(fā)事件將不執(zhí)行，摧毀重建：一個(gè)組件調(diào)用兩次分別顯示，在頁(yè)面上無(wú)區(qū)別，但是是同意組件的再次渲染，定義在該組件上的路由變化將監(jiān)聽(tīng)不到。

解決方法：將路由監(jiān)聽(tīng)放在一直不變的主頁(yè)面index.vue上.

③當(dāng)需要在同一屬性下執(zhí)行多個(gè)回調(diào)函數(shù)的時(shí)候，將函數(shù)以對(duì)象的形式放在數(shù)組中

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

vue路由監(jiān)聽(tīng)不到怎么辦

最近在使用vue項(xiàng)目的時(shí)候發(fā)現(xiàn)我們使用的watch監(jiān)聽(tīng)不到$route的變化，查了很多文檔最終終于找到解決辦法。

方法一

路由包含子路由

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

在幾個(gè)子路由之間跳轉(zhuǎn)就能保證監(jiān)聽(tīng)到路由變化

方法二

監(jiān)聽(tīng)$route.path對(duì)象

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

如果我們的路由沒(méi)有子路由，想要實(shí)現(xiàn)監(jiān)聽(tīng)可以使用$route.path進(jìn)行深度監(jiān)聽(tīng)，這樣也能監(jiān)聽(tīng)到路由變化了。

方法三

使用vue自帶的路由守衛(wèi)beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave

beforeRouteEnter (to, from, next) {
? ? next(vm => {
? ? ?? ?// 通過(guò) `vm` 訪問(wèn)組件實(shí)例
??? ? })
? },
? beforeRouteUpdate (to, from, next) {
? },
? beforeRouteLeave (to, from, next) {
? }

據(jù)說(shuō)還能通過(guò)設(shè)置keep-alive來(lái)保證路由被監(jiān)聽(tīng)到，這個(gè)我最近還沒(méi)用的，有用過(guò)的小伙伴可以分享一下。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: