vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問(wèn)題及解決

更新時(shí)間：2023年04月05日 10:16:29 作者：陌路&情殤

這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)

vue中，如果跳轉(zhuǎn)同一個(gè)頁(yè)面路由，雖不會(huì)影響功能，但是會(huì)報(bào)錯(cuò)

原因：路由的push會(huì)向歷史記錄棧中添加一個(gè)記錄，同時(shí)跳轉(zhuǎn)同一個(gè)路由頁(yè)面，會(huì)造成一個(gè)重復(fù)的添加，導(dǎo)致頁(yè)面的報(bào)錯(cuò)

解決方案：在router的index.js中重寫(xiě)vue的路由跳轉(zhuǎn)push

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err);
}

編程式路由跳轉(zhuǎn)多次點(diǎn)擊報(bào)錯(cuò)問(wèn)題

使用編程式路由進(jìn)行跳轉(zhuǎn)時(shí)，控制臺(tái)報(bào)錯(cuò)，如下所示。

問(wèn)題分析

該問(wèn)題存在于Vue-router v3.0之后的版本，由于新加入的同一路徑跳轉(zhuǎn)錯(cuò)誤異常功能導(dǎo)致。

解決方法

重寫(xiě) $router.push 和 $router.replace 方法，添加異常處理。

//push
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

//replace
const VueRouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (to) {
  return VueRouterReplace.call(this, to).catch(err => err)
}

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 編程式路由跳轉(zhuǎn)多次點(diǎn)擊報(bào)錯(cuò)問(wèn)題</title>
</head>
<body>
    <div id="app">
        <button @click="pageFirst">Page First</button>
        <button @click="pageSecond">Page Second</button>
        <router-view></router-view>
    </div> 

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        const First = { template: '<div>First Page</div>' } //調(diào)用路由name屬性
        const Second = { template: '<div>Second Page</div>' }
        routes = [
            { path:'/first', name:"first" ,component: First },  //設(shè)置路由name屬性
            { path: '/second', name:"second", component: Second }
        ]
        router = new VueRouter({
            routes
        })

        //push
        const VueRouterPush = VueRouter.prototype.push
        VueRouter.prototype.push = function push (to) {
            return VueRouterPush.call(this, to).catch(err => err)
        }

        //replace
        const VueRouterReplace = VueRouter.prototype.replace
        VueRouter.prototype.replace = function replace (to) {
            return VueRouterReplace.call(this, to).catch(err => err)
        }

        const app = new Vue({
            router,
            methods: {
                pageFirst(){ router.push('/first') },
                pageSecond(){ router.push({ name: 'second' }) },
            },
        }).$mount('#app')
    </script>
</body>
</html>