navigationcancelled(解決vue路由跳轉報錯)

當使用Vue Router進行路由跳轉時,如果出現"Navigation cancelled from …… to with a new navigation"錯誤,通常是由于在路由跳轉過程中重復點擊了相同的路由鏈接或者使用了router.push()方法進行了多次異步路由跳轉。

解決方法:

檢查代碼中是否存在多次點擊相同路由鏈接的情況,可以通過給路由鏈接添加@click.prevent事件來阻止多次點擊,或者使用<router-link-exact-active>標簽來確保只有在路由完全匹配時才會添加活動類。

如果是通過router.push()方法進行異步路由跳轉,可以使用router.replace()方法來替代,確保每次只進行一次路由跳轉。

如果以上方法都無效,可以嘗試在路由跳轉前添加this.$router.currentRoute.meta.keepAlive = false來取消路由的緩存,然后再進行跳轉。

示例代碼:

<template><p><router-link to="/home" @click.prevent>Home</router-link><router-link to="/about" @click.prevent>About</router-link><router-link-exact-active to="/home">Home</router-link-exact-active><router-link-exact-active to="/about">About</router-link-exact-active></p></template><script>export default {methods: {goToHome() {this.$router.replace('/home');},goToAbout() {this.$router.replace('/about');}}}</script>

希望以上方法能夠解決你的問題。