在vue2，vue3中进行页面跳转并传参，最后查询所传参数

一、在vue2中进行页面跳转并传参，最后查询所传参数

1.使用 < router-link>

<router-link :to="{ path: '/xm1', query: { id: 111 }}">跳转到 xm1页面</router-link>

2.使用this.$router.push({ path: ‘/xm1’, query: { id: 111 }})

//跳转到 xm1页面
this.$router.push({ path: '/xm1', query: { id: 111 }})

3.接收参数

<script>
export default {
  mounted() {
    this.id = this.$route.query.id;
  },
  data() {
    return {
      id: null
    }
  }
}
</script>

二、在vue3中进行页面跳转并传参，最后查询所传参数

1.跳转传参

//引入useRouter
import { useRouter } from 'vue-router';
//跳转传参
const router = useRouter();
router.push({ name: 'xm1', query: { id: 111 }});

2.接收参数

//引入useRoute
import { useRoute } from 'vue-router';
//获取传参
const route = useRoute();
let username=route.query.id;

3.返回上一页

 <div class="tit-back" @click="$router.go(-1)">
          <el-icon><ArrowLeftBold /></el-icon>返回</div
        ></div>

  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  //返回上一级
  router.back()

4.在同一个页面，既要实现返回上一页，又要接受其它页面跳转传来的参数

  import { useRouter } from 'vue-router';
  // 获取传参
  const router = useRouter();
  let obj11 = router.currentRoute.value.query;

   //返回上一级
   router.back()