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

原创已于 2024-03-13 15:35:59 修改 · 709 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-03-13 15:14:22 首次发布

3 篇文章

订阅专栏

本文详细介绍了在Vue2和Vue3中使用`<router-link>`和VueRouterAPI进行页面跳转，并传递参数，以及如何在目标组件中接收和处理这些参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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