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>