声明式导航&编程式导航
普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航
2.在浏览器中,调用API方法实现导航的方式,叫做编程式导航,例如:
普通网页中调用location.href跳转到新页面的方式,属于编程式导航
vue-router中的编程式导航API
1.this.$router.push('hash地址')
跳转到指定hash地址,并增加一条历史记录(可后退)
<button @click="gotoLK">跳转到电影1页面</button>
methods: {
gotoLK(){
// 通过编程式导航API,导航跳转到指定的页面(可后退)
this.$router.push('/movie/1')
},
},
2.this.$router.replace('hash地址')
跳转到指定的hash地址,并替换掉当前的历史纪录
<button @click="gotoLK2">跳转到电影2页面</button>
methods: {
gotoLK2(){
// 通过编程式导航API,导航跳转到指定的页面(不可后退)
this.$router.replace('/movie/2')
}
},
3.this.$router.go(数值n)
可在浏览器历史中前进和后退
<button @click="goBack1">后退</button>
<button @click="goBack2">前进</button>
methods:{
goBack1(){
// go(-1)后退一层
this.$router.go(-1)
// go(-100)如果后退层数超过上限,则原地不动
this.$router.go(-100)
},
goBack2(){
this.$router.go(1)
}
}
$router.go的简化方法
在实际开发中,一般只会前进和后退一层页面,因此vue-router提供了如下两个便捷方法:
1.$router.back()
//在历史记录中,后退到上一个页面
<button @click="$router.back()">后退</button>
2.$router.forward()
//在历史记录中,后退到下一个页面
<button @click="$router.forward()">前进</button>