vue 笔记:NavigationDuplicated: Avoided redundant navigation to current location 解决方案

最新推荐文章于 2024-04-19 09:10:46 发布

原创最新推荐文章于 2024-04-19 09:10:46 发布 · 884 阅读

0 ·

CC 4.0 BY-SA版权

html学习笔记专栏收录该内容

4 篇文章

订阅专栏

这个示例展示了如何在Vue Router中修改原型对象的push方法，以捕获并处理导航错误。当调用push函数时，任何错误都会被catch块捕获。示例还包括Vue组件的创建，如登录和注册页面，并演示了不同方式的路由链接使用。

加入以下代码:

//获取原型对象上的push函数
    const originalPush = VueRouter.prototype.push;
    //修改原型对象中的push方法
    VueRouter.prototype.push = function push(location) {
        return originalPush.call(this, location).catch(err => err)
    };

例子:

<!DOCTYPE HTML>
<html>
<head>
    <title>Example</title>
    <meta charset="UTF-8">
    <meta name="author" content="strcpy"/>
    <meta name="description" content="simple exmaple"/>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>

    <style type="text/css">

    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <a href="#/login?name=xiaochen&password=123">user login</a>
        <a href="#/reg">user reg</a>

        <router-link :to="{path:'/login'}">user login</router-link>
        <router-link :to="{path:'/reg'}">user register</router-link>

        <router-link to="/login">user login</router-link>
        <router-link to="/reg">user register</router-link>

        <router-link :to="{name:'login',query:{name:'xiaochen', password:'123'}}">user login</router-link>
        <router-link :to="{name:'Register', params:{id:'123',name:'xiaochen'}}">user register</router-link>

        <router-view></router-view>

        <button @click="login" value="user login">user login</button>
        <button @click="register" value="user login">user register</button>
    </div>
</body>

<script>

    const notFound = {
        template:`<div><h3>404 not found 页面丢失了</h3></div>`,

    };

    const login = {
        template: `<div><h3>user login</h3></div>`,
        created(){
            console.log("created");

            console.log(this.$route.query.name);
        }
    };

    const reg = {
        template: `<div><h3>user register</h3></div>`,
        created(){
            console.log("created");

            console.log(this.$route.params);
        }
    };

    //获取原型对象上的push函数
    const originalPush = VueRouter.prototype.push;
    //修改原型对象中的push方法
    VueRouter.prototype.push = function push(location) {
        return originalPush.call(this, location).catch(err => err)
    };

   const router = new VueRouter({
       routes:[
           {path: '/', redirect:'/login'},
           {path:'/login', component:login, name:'login'},
           {path: '/reg/:id/:name', component: reg, name: 'Register'},
           {path: '*', component: notFound}
       ]
   });



   const app = new Vue({
       el: "#app",
       data: {
           msg: "basic use"
       },
       components: {
           components: {

           }
       },
       router,
       methods:{
           login(){
               // if(this.$route.name != "login")
               // this.$router.push({name:'Register'})

                   this.$router.push("/login")
                console.log(this)
           },

           register(){
               if(this.$route.name != "Register")
                   this.$router.push("/reg")
           }
       }
   });

</script>
</html>