vue 路由跳转几种方法
1.router-link 【实现跳转最简单的方法】
<router-link to='需要跳转到的页面的路径> 类似于a 的标签
div和css样式略
<li >
<router-link to="keyframes">点击验证动画效果 </router-link>
</li>
2、this.$router.push({ path:’/user’})
描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。
<template>
.....
<li @click="change">验证路由传参</li>
</template>
<script>
export default {
data () {
return {
id:43, //需要传递的参数
}
},
methods:{
change(){
this.$router.push({ //核心语句
path:'/select', //跳转的路径
query:{ //路由传参时push和query搭配使用 ，作用时传递参数
id:this.id ,
}
})
}
}
}
</script>
<template>
.....
<div class="plant-o" v-for="item in tableData">
<div class="plant-reader-r" @click="detail(item.id)">查看详情</div>
<div/>
</template>
<script>
export default {
data () {
return {
tableData:[] //接口传过来的数据
}
},
methods:{
//点击跳转
detail(id){
this.$router.push({path: '/details',query: {id:id}}) //query 查询
},
}
</script>
//子页面
第一， 先在data定义id
第二， 拿到传过来的id值 => this.id = this.$route.query.id;
3、this.$router.replace()
描述：同样是跳转到指定的url，但不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
.
4、this.$router.go(n)
相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面
//后退一步记录
this.$router.go(-1);
//前进一步记录
this.$router.go(1);
//前进3步记录
this.$router.go(3);