vue路由学习-编程式路由导航

编程式路由导航可以看作用JS的方式实现路由跳转

普通方法

window.location.href = URL

路由跳转：

1. 改变hash值（#）实现历史记录的保存，还可进行监视
2. API调用

this包含两个属性：

$router

与

$route

this.$router.push(path) // 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path) // 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back() // 请求(返回)上一个记录路由
this.$router.go(-1) // 请求(返回)上一个记录路由
this.$router.go(1) // 请求下一个记录路由

实例

<li v-for="solo in soloArr" :key="solo.id">
<button @click="pushShow(solo.id)">push查看</button>
<button @click="replaceShow(solo.id)">replace查看</button>

methods: {
pushShow (id) {
this.$router.push(`/home/solo/msgdetail/${id}`)
},
replaceShow (id) {
this.$router.replace(`/home/solo/msgdetail/${id}`)
}
},