vue 路由跳转几种方法

最新推荐文章于 2024-06-26 09:37:28 发布

hammer1010

最新推荐文章于 2024-06-26 09:37:28 发布

阅读量710

点赞数 3

分类专栏： vue 文章标签： vue 路由跳转几种方法

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

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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;
返回上一步 => this.$router.back()

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

5、this.$router.resolve

单击事件打开新窗口：
首先尝试使用vue框架支持的this.$router.resolve的方法

const {href}   = this.$router.resolve({
   path:'/tribunal/presDeatil',
   query:{
      index:index, 
      status:hisPres.audit_status   
   }
})
window.open(href, '_blank')

//https://blog.csdn.net/qq_39311328/article/details/105075404