Vue3的路由跳转传参接参

小阳生煎

已于 2022-07-04 15:24:56 修改

阅读量1.6k

点赞数

分类专栏： # Vue3 文章标签： vue.js

于 2022-06-23 15:15:33 首次发布

本文链接：https://blog.csdn.net/m0_53912016/article/details/125427740

版权

Vue3 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

路由跳转

vue2路由跳转点击这里

分为2种方法

query ========

通过 router.push{
path:'跳转路径',
query{
传入参数
}
}
然后通过route.query来进行接收

a页面

<template>
  <div class="main">
      <el-button
        style="width: 100px; margin: 0 40%"
        type="primary"
        @click="btnnext"
        >登录</el-button>
  </div>
</template>
<script lang='ts'>
import { reactive, toRefs,onMounted,} from "vue";
import { useRouter,useRoute} from 'vue-router';//要引入路由
export default {
  name: "",
  setup() {
    let router = useRouter(),route = useRoute();
    const data = reactive({
      btnnext(){
        router.push({
        //name: 'Home',//这个query的话使用path再次刷新会页面空白最好用name
          path:'/',
          query: {
           mallCode: "M000989",
        },
        })
      },
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>
<style scoped>

}
</style>

b页面

<template>
  <div class="main">
     <div class="header">{{num}}</div>
  </div>
</template>
<script lang="ts">
import {reactive,toRefs} from 'vue';
import { useRouter,useRoute} from 'vue-router';
// router是全局路由对象，route是当前路由对象
export default({
  name: 'Home',
  setup(){
    let route = useRoute();
    const data = reactive({
      num:route.query.mallCode,
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  }
});
</script>
<style lang="less" scoped>
.main{
  width: 100%;
  height: 100vh;
  .header{
    color: red;
  }
}
</style>

params ========

a页面

<template>
  <div class="main">
      <el-button
        style="width: 100px; margin: 0 40%"
        type="primary"
        @click="btnnext"
        >登录</el-button>
  </div>
</template>
<script lang='ts'>
import { reactive, toRefs,onMounted,} from "vue";
import { useRouter,useRoute} from 'vue-router';//要引入路由
export default {
  name: "",
  setup() {
    let router = useRouter(),route = useRoute();
    const data = reactive({
      btnnext(){
        router.push({
         name: 'Home',//这个是路由的name
         params: {
          mallCode: "M000989",
        },  
        })
      },
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>
<style scoped>

}
</style>

b页面

<template>
  <div class="main">
     <div class="header">{{num}}</div>
  </div>
</template>
<script lang="ts">
import {reactive,toRefs} from 'vue';
import { useRouter,useRoute} from 'vue-router';
// router是全局路由对象，route是当前路由对象
export default({
  name: 'Home',
  setup(){
    let route = useRoute();
    const data = reactive({
   
      num:route.params.mallCode
    });
    const refData = toRefs(data);
    return {
      ...refData,
    };
  }
});
</script>
<style lang="less" scoped>
.main{
  width: 100%;
  height: 100vh;
  .header{
    color: red;
  }
}
</style>