Vue路由导航（replace、push、forward、back、go）

Vue路由导航（replace、push、forward、back、go）

先了解栈结构，再学习以下内容

• 栈的数据结构：先进后出，后进先出。
• 原理：push将元素压入栈内，pop将元素弹出，栈有分别有栈底指针和栈顶指针，指向栈内最低和最高的元素。

replace和push属性的原理

• 浏览器中的前进和后退的按钮也是使用了栈的数据结构实现，但也有不同。对于浏览器而言，分别有两种属性：
  • push属性（推进）：以叠加的方式进行入栈操作。
  • replace属性（替换）：以替换栈顶元素的方式进行入栈操作。
  • 注意1：不管有没有使用其他属性的，浏览器默认添加push属性。（仅在声明式中使用，以下会讲。）
  • 注意2：不管使用哪种属性进行操作，浏览器都不会删除原有的浏览记录，只会更改指针的指向。

replace和push属性的’声明式’路由导航和’编程式’路由导航

replace和push属性的’声明式’路由导航

• 注意事项：
  • 不管有没有使用其他属性的，浏览器默认添加push属性，所以写不写push属性都会使用。（以下是replace属性）
  • 声明式适合用于点击超链接转换路由的方式
  • query和params都可以使用
• replace属性两种格式：<router-link :replace="true">和<router-link replace>（简写）

<template>
    <div>
        <h2>A</h2>
        <div>
            <ul>
                <li>
                    <!-- 声明式路由导航 -->
                    <router-link :replace="true" :to="{
                        name : 'ac',
                        params : {
                            a1 : a[0],
                            a2 : a[1],
                            a3 : a[2]
                        }
                    }" >
                        A1 Router-Link
                    </router-link>
                </li>
                <li>
                    <router-link replace :to="{
                        name : 'ad',
                        params : {
                            a1 : b[0],
                            a2 : b[1],
                            a3 : b[2]
                        }
                    }" >
                        A2 Router-Link
                    </router-link>
                </li>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name : 'A',
        data(){
            return{
                a : ['111', '222', '333'],
                b : ['444', '555', '666']
            }
        }
    }
</script>

replace和push属性的’编程式’路由导航

• 注意事项：
  • 编程式适合用于点击按钮转换路由的方式
  • 编程式跟声明式不同，编程式可以使用相关的API来完成
  • query和params都可以使用

// push属性的格式
// $router：多组件共享的路由器对象。
this.$router.push({
    name : '',
    query or params : {}
}, ()=>{}, ()=>{})

// replace属性的格式
// $router：多组件共享的路由器对象。
this.$router.replace({
    name : '',
    query or params : {}
},  ()=>{}, ()=>{})

• 解释()=>{}, ()=>{}

  • 不使用()=>{}, ()=>{}的情况：在编程式反复执行push和replace属性浏览器控制台会出现以下图片情况

  • 

  • 原因：在使用push和replace属性时，会传递两个回调函数，一个是成功回调，一个是失败回调。如果没有传递回调函数，则就会出现报错的情况，在后面加上()=>{}, ()=>{}就好了。

<template>
    <div>
        <h2>A</h2>
        <div>
            <ul>
                <li>
                    <button @click="goA1">A1 Button</button>
                </li>
                <li>
                    <button @click="goA2">A2 Button</button>
                </li>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name : 'A',
        data(){
            return{
                a : ['111', '222', '333'],
                b : ['444', '555', '666']
            }
        },
        methods : {
            goA1(){
                // 编程式路由导航
                // $router：多组件共享的路由器对象。
                this.$router.push({
                        name : 'ac',
                        params : {
                            a1 : this.a[0],
                            a2 : this.a[1],
                            a3 : this.a[2]
                        }
                    }, ()=>{}, ()=>{})
            },
            goA2(){
                this.$router.replace({
                    name : 'ad',
                    params : {
                        a1 : this.b[0],
                        a2 : this.b[1],
                        a3 : this.b[2]
                    }
                },  ()=>{}, ()=>{})
            }
        }
    }
</script>

forward、back和go的’编程式’路由导航

• forward：前进，this.$router.forward()
• back：后退，this.$router.back()
• go：前进几步、后退几步，this.$router.go()
  • 括号内为正数表示前进，负数表示后退，数字表示几步

// App.vue
<template>
    <div>
        <button @click="forward">前进</button>
        <button @click="back">后退</button>
        <button @click="forwardFive">前进5步</button>
        <button @click="backFive">后退5步</button>
    </div>
</template>

<script>
    export default {
        name : 'App',
        methods : {
            forward(){
                this.$router.forward()
            },
            back(){
                this.$router.back()
            },
            forwardTwo(){
                this.$router.go(5)
            },
            backTwo(){
                this.$router.go(-5)
            }
        }
    }
</script>
k()
            },
            forwardTwo(){
                this.$router.go(5)
            },
            backTwo(){
                this.$router.go(-5)
            }
        }
    }
</script>