Vue-router 's beforeRouteUpdate does not trigger

topic description

the root component tab switches, watch snooping route triggers, but beforeRouteUpdate does not trigger

related codes

 <footer class="tabBar">
    <router-link to="/home">
        <span></span>
    </router-link>
    <router-link to="/noticeCenter">
        <span></span>
    </router-link>
    <router-link to="/myCenter">
        <span></span>
    </router-link>
</footer>
<router-view></router-view>
    
    
 export default {
  data() {
    return {};
  },
  methods: {}
  },
  watch: {
    $route(to, from) {
        console.log(to);
        console.log(from);
    }
  }
  beforeRouteUpdate(to, from, next) {
    console.log(to);
    console.log(from);
    next();
  }
};


routes: [
    { path: "/", redirect: "/home" },
    { path: "/home", component: home }, //
    { path: "/noticeCenter", component: noticeCenter },  //
    { path: "/myCenter",name: "myCenter",component: myCenter }   //
]

Sep.16,2021

the official explanation for ide/advanced/navigation-guards.html-sharp%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB" rel=" nofollow noreferrer "> beforeRouteUpdate is as follows:

beforeRouteUpdate (to, from, next) {
    // 
    //  /foo/:id /foo/1  /foo/2 
    //  Foo 
    //  `this`
  },
The reason why

cannot be triggered can be seen in the second and third lines of the comment. Only the path of the dynamic parameter (such as / foo/1 and / foo/2) will be called.

I try to handle router dynamically

vue.$router.push({ path: path , query: { t: (new Date()) }});

in this scenario, beforeRouteUpdate is triggered successfully.

you can consider modifying your router-link writing by adding a parameter. The code example is as follows:

<router-link :to="{path:'/home',query: {t: new Date()}}"></router-link>

of course, the most important thing is that this method is the navigation guard in the component to switch the routing component. According to your current code function, if you want to trigger,
in addition to router-link with parameters, you also need to modify router-view

.
<keep-alive>
  <router-view></router-view>
</keep-alive>
Menu