vue-cli(Vue-Router)编程式导航,借助浏览器自带的前进后退按钮,我们就可以实现页面的前进后退了,实现原理是当用户每点击一次,当前的路径就会被保存,返回就是跳转到上一次的路径。在Vue-Router中,也提供了这样的方法,通过编写代码来实现导航的切换,让我们来体验一下吧!
编写具有前进,后退,自定义跳转路径的代码
app.vue
1 2 3 4 5 6 7 8 9 10 11
| <router-link to="/home">home</router-link>
<router-link to="/document">document</router-link>
<router-link to="/Search">Search</router-link>
<!-- 前进和后退 -->
<button type="" @click="backHandle">后退</button>
<button type="" @click="forwardHandle">前进</button>
<button type="" @click="goHandle">控制前进后退的步数</button>
<button type="" @click="pushHandle">控制指定的导航push</button>
<button type="" @click="replaceHandle">控制指定的导航relace</button>
<router-view/> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| export default {
name: 'App',
data(){
return {
index:'/rank',
}
},
methods:{
//后退
backHandle(){
this.$router.back();
},
//前进
forwardHandle(){
this.$router.forward();
},
goHandle(){
//负数后退 正数前进,0跳转到当前导航
this.$router.go(-1);
},
pushHandle(){
//this.$router.push('./document');
this.$router.push({path:'./document'});
},
replaceHandle(){
this.$router.replace({path:'./document'});
}
}
} |
知识详解:
back 回退一步
forward 前进一步
go指定前进回退步数
1 2
| //负数后退 正数前进,0跳转到当前导航
this.$router.go(-1); |
push导航到不同url,向history栈添加一个新的记录
1 2
| //this.$router.push('./document'); //方法一
this.$router.push({path:'./document'}); //方法二 |
replace 导航到不同url,替换history栈中当前记录
1
| this.$router.replace({path:'./document'}); |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"vue-cli(Vue-Router)编程式导航"
最新评论