Vue路由導(dǎo)航（replace、push、forward、back、go）

先了解棧結(jié)構(gòu)，再學(xué)習(xí)以下內(nèi)容

• 棧的數(shù)據(jù)結(jié)構(gòu)：先進(jìn)后出，后進(jìn)先出。
• 原理：push將元素壓入棧內(nèi)，pop將元素彈出，棧有分別有棧底指針和棧頂指針，指向棧內(nèi)最低和最高的元素。

replace和push屬性的原理

• 瀏覽器中的前進(jìn)和后退的按鈕也是使用了棧的數(shù)據(jù)結(jié)構(gòu)實現(xiàn)，但也有不同。對于瀏覽器而言，分別有兩種屬性：
  • push屬性（推進(jìn)）：以疊加的方式進(jìn)行入棧操作。
  • replace屬性（替換）：以替換棧頂元素的方式進(jìn)行入棧操作。
  • 注意1：不管有沒有使用其他屬性的，瀏覽器默認(rèn)添加push屬性。（僅在聲明式中使用，以下會講。）
  • 注意2：不管使用哪種屬性進(jìn)行操作，瀏覽器都不會刪除原有的瀏覽記錄，只會更改指針的指向。

replace和push屬性的’聲明式’路由導(dǎo)航和’編程式’路由導(dǎo)航

replace和push屬性的’聲明式’路由導(dǎo)航

• 注意事項：
  • 不管有沒有使用其他屬性的，瀏覽器默認(rèn)添加push屬性，所以寫不寫push屬性都會使用。（以下是replace屬性）
  • 聲明式適合用于點擊超鏈接轉(zhuǎn)換路由的方式
  • query和params都可以使用
• replace屬性兩種格式：<router-link :replace="true">和<router-link replace>（簡寫）

<template>
    <div>
        <h2>A</h2>
        <div>
            <ul>
                <li>
                    <!-- 聲明式路由導(dǎo)航 -->
                    <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屬性的’編程式’路由導(dǎo)航

• 注意事項：
  • 編程式適合用于點擊按鈕轉(zhuǎn)換路由的方式
  • 編程式跟聲明式不同，編程式可以使用相關(guān)的API來完成
  • query和params都可以使用

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

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

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

  • 不使用()=>{}, ()=>{}的情況：在編程式反復(fù)執(zhí)行push和replace屬性瀏覽器控制臺會出現(xiàn)以下圖片情況

  • 

  • 原因：在使用push和replace屬性時，會傳遞兩個回調(diào)函數(shù)，一個是成功回調(diào)，一個是失敗回調(diào)。如果沒有傳遞回調(diào)函數(shù)，則就會出現(xiàn)報錯的情況，在后面加上()=>{}, ()=>{}就好了。文章來源地址http://www.zghlxwxcb.cn/news/detail-738477.html

<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(){
                // 編程式路由導(dǎo)航
                // $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的’編程式’路由導(dǎo)航

• forward：前進(jìn)，this.$router.forward()
• back：后退，this.$router.back()
• go：前進(jìn)幾步、后退幾步，this.$router.go()
  • 括號內(nèi)為正數(shù)表示前進(jìn)，負(fù)數(shù)表示后退，數(shù)字表示幾步

// App.vue
<template>
    <div>
        <button @click="forward">前進(jìn)</button>
        <button @click="back">后退</button>
        <button @click="forwardFive">前進(jìn)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>

到了這里，關(guān)于Vue路由導(dǎo)航（replace、push、forward、back、go）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！