vue路由跳转

从此以后.

已于 2022-06-24 14:55:39 修改

阅读量274

点赞数

文章标签：大数据

于 2022-06-24 14:38:08 首次发布

本文链接：https://blog.csdn.net/qq_44913478/article/details/125445144

版权

跳转到指定页面

this.$router.push({
    path:"路由名称",
    query:{} //传参对象
})

跳转到上一页或者多级页面
this.$router.go(-1)

页面接收参数
this.$route.query

json常用方法

JSON.stringify()

JSON.parse()

<template>
  <div>
    <div @click="toClass">没参数跳转</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //  没参数
    toClass() {
      this.$router.push({
        path: "/class"
      });
    },

普通参数跳转

<template>
  <div>
    
    <div @click="toClassQuery">普通参数跳转</div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 普通参数
    toClassQuery() {
      let name = "柴晓畅";
      let age = 18;
      this.$router.push({
        path: "/class",
        query: {
          name,
          age,
          sex: "女"
        }
      });
    },
   
    }
  
};
</script>

引用数据类型跳转

<template>
  <div>

    <div @click="toQuery">引用数据类型参数跳转</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 引用数据类型参数跳转
    toQuery() {
      let obj = {
          name:'lxy',
          age:18
      }
      obj = JSON.stringify(obj)
      this.$router.push({
        path: "/class",
        query: {
          obj
        }
      });
    }
  }
};
</script>

接收参数