ip地址访问不了网站,php做网站python做什么,做网站接广告要交税吗,长沙网站优化对策Vue路由导航#xff08;replace、push、forward、back、go#xff09;
先了解栈结构#xff0c;再学习以下内容 栈的数据结构#xff1a;先进后出#xff0c;后进先出。原理#xff1a;push将元素压入栈内#xff0c;pop将元素弹出#xff0c;栈有分别有栈底指针和栈顶…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 :replacetrue和router-link replace简写
templatedivh2A/h2divulli!-- 声明式路由导航 --router-link :replacetrue :to{name : ac,params : {a1 : a[0],a2 : a[1],a3 : a[2]}} A1 Router-Link/router-link/lilirouter-link replace :to{name : ad,params : {a1 : b[0],a2 : b[1],a3 : b[2]}} A2 Router-Link/router-link/li/ul/divrouter-view/router-view/div
/templatescriptexport default {name : A,data(){return{a : [111, 222, 333],b : [444, 555, 666]}}}
/scriptreplace和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属性时会传递两个回调函数一个是成功回调一个是失败回调。如果没有传递回调函数则就会出现报错的情况在后面加上(){}, (){}就好了。
templatedivh2A/h2divullibutton clickgoA1A1 Button/button/lilibutton clickgoA2A2 Button/button/li/ul/divrouter-view/router-view/div
/templatescriptexport 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]}}, (){}, (){})}}}
/scriptforward、back和go的’编程式’路由导航
forward前进this.$router.forward()back后退this.$router.back()go前进几步、后退几步this.$router.go() 括号内为正数表示前进负数表示后退数字表示几步
// App.vue
templatedivbutton clickforward前进/buttonbutton clickback后退/buttonbutton clickforwardFive前进5步/buttonbutton clickbackFive后退5步/button/div
/templatescriptexport 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
