作用:不借助<router-link>
实现路由跳转,让路由跳转更加灵活
使用:
<template>
<div>
<ul>
<li v-for="(person,index) in person" :key="index">
<button @click="send(person)">成员{{index}}</button>
</li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Person",
data(){
return{
person:[
{name:'张三',age:18},
{name:'李四',age:19},
{name:'王五',age:20},
]
}
},
methods:{
send(person){
this.$router.push({
name:'Info',
query:{
name:person.name,
age:person.age
}
})
}
}
}
</script>
其他方法
this.$router.replace({
name:'Info',
params:{
name:xxx,
age:xxx
}
}) //push是追加历史记录,replace是替换当前记录
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go(m) //可前进也可后退,m = 2 代表前进两次 m = -3 代表后退三次