vue 路由跳转几种方法

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>

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);

拿着 不谢 请叫我“锤” 谢谢！！！

来源：CSDN

作者：hammer1010

链接：https://blog.csdn.net/hammer1010/article/details/91802172