使用vue-router在页面之间传值及接收值

本文详细介绍如何在Vue.js中使用$router.push方法进行页面间传值,并在目标页面通过this.$route.params.id获取传入的值。同时,讨论了在页面刷新时保持传值的方法,即在路由配置中使用动态路径匹配。

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

第一页 点击去第二页的时候进行传值直接贴代码看:

<template>
  <div id="app">
    <div><router-link to="/">首页</router-link></div>
    <div><a href="javascript:void(0)" @click="getMovieDetail(1)">去第二个页面</a></div>
    <div><router-link to="/home">去home</router-link></div>
    <router-view/>

    <a href="https://www.feiyit.com">abc</a>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods:{
    getMovieDetail(id) {
      this.$router.push({
        name: 'login',
        params: {
          id: id
        }
      })
    }
  }
}
</script>

<style>

</style>

红色部分为传值部分,使用this.$router.push()进行传值

第二页面接收从第一个页面传递过来的参数 id

<template>

</template>

<script>

export default {
  name: 'login',
  data () {
    return {
      uid:this.$route.params.id,
      msg: '这是第二个页面'
    }
  },
  computed: {
           
    },
  mounted: function() {
            console.log(this.uid);
    },
  methods:{

  }
}
</script>

  红色部分打印下传递过来的id值,在接受传值的页面里使用this.$route.params.id 即可获取到传递的值

注意,如果刷新login页面,将失去传值

解决方法,在路由里面增加变量        其中【/login/:id】 

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login/:id',
      name: 'login',
      component: login,
      meta: {
            title: '登录页'
      }
    },
    {
      path: '/home',
      name: 'home',
      component: home,
      meta: {
            title: '其他页'
      }
    }
  ]
})

  

转载于:https://www.cnblogs.com/guoliping/p/9844036.html

<think>好的,我现在需要帮助用户了解在Vue 3中如何通过路由实现页面间的数据递。用户可能刚接触Vue 3,或者已经有一些经验但不太清楚具体的方法。首先,我需要回顾Vue Router的相关知识,尤其是Vue 3中的变化,比如Composition API的使用。 根据提供的引用内容,用户已经给出了一些参考资料,其中提到了几种方式,比如params和query,还有父组件通过router-view。我需要将这些方法系统地整理出来,并确保符合用户的要求,比如使用正确的LaTeX格式和结构。 首先,我应该区分不同的方式。引用[1]和[2]提到了通过路由的params和query来,这是两种常见的方法。在Vue 3中,使用Composition API的话,可能需要用到useRouter和useRoute。引用[3]提到了在目标页面引入useRoute来获取参数,这很重要,需要详细说明。 然后,引用[5]展示了父组件通过router-view递props的方式,这可能是在同一个父组件下的子路由之间,但用户的问题是关于两个独立页面之间,所以可能需要确认这种方法的适用性,或者是否需要包括在内。 接下来,我需要考虑每种方法的步骤,比如如何递参数,如何在目标页面接收参数。同时,要确保示例代码正确,使用Vue 3的语法,比如script setup语法糖。例如,引用[2]中的代码示例使用Vue 3的setup语法,应该参考这一点。 外,用户提到的引用[4]虽然关于父子组件,但可能和路由关系不大,但如果有路由嵌套的情况,可能需要提及。不过用户的问题是两个页面之间,可能更关注路由参数而非组件间的直接。 需要注意的是,在Vue Router中,params和query的区别。params需要提前在路由配置中定义,而query则是可选的查询参数,不需要预先定义。这点需要明确指出,避免用户混淆。例如,引用[1]中使用name来指定路由,并params,而引用[2]使用path和query,这可能更适合不需要动态路径参数的场景。 外,在Vue 3中,如果使用params递参数,并且通过path跳转的话,可能会出现参数无法接收的问题,所以最好使用name来指定路由。这点需要提醒用户,确保他们不会遇到问题。 还有,关于通过props,引用[5]展示了父组件向router-view递props的方式,但如果是通过路由配置,可以在路由定义中设置props: true,从而将params作为组件的props接收。这可能是一个更优雅的方式,但需要检查用户提供的引用是否有相关例子,如果没有的话,可能需要简要提及。 此外,还要考虑到数据类型的限制,比如params递的只能是字符串或数字,而复杂对象可能需要序列化或者使用其他方式递,比如状态管理(Vuex或Pinia),但用户的问题可能仅限于路由,所以暂时不涉及这部分。 最后,需要生成相关问题,例如不同方法的区别、如何递复杂数据、组件如何接收参数等,这些都能帮助用户进一步学习。 总结步骤: 1. 介绍params方法,包括递和接收使用name指定路由。 2. 介绍query方法,使用path或name,参数显示在URL。 3. 说明如何通过props接收路由参数,在路由配置中设置。 4. 父组件通过router-view递数据的情况,可能适用于特定结构。 5. 每种方法的注意事项,比如params需要路由配置,query不需要,props的配置等。 6. 生成相关问题,帮助用户深入理解。 需要确保示例代码正确,符合Vue 3的语法,比如使用script setup和Composition API的函数。同时,检查是否有遗漏的方法,比如状态管理,但根据用户的问题,可能不需要涉及,除非用户明确要求,但问题仅限于路由。</think>在Vue 3中实现页面间数据递,主要通过以下方法实现: ### 一、路由参数(params) 1. **递参数** 使用`router.push`时通过`params`字段递参数,必须通过路由的`name`跳转: ```vue <script setup> import { useRouter } from 'vue-router' const router = useRouter() const sendData = () => { router.push({ name: 'targetPage', // 对应路由配置中的name params: { id: 123, type: 'test' } }) } </script> ``` 路由配置需定义动态参数: ```js { path: '/target/:id/:type', name: 'targetPage', component: TargetPage } ```[^1] 2. **接收参数** 在目标页面使用`useRoute`获取参数: ```vue <script setup> import { useRoute } from 'vue-router' const route = useRoute() console.log(route.params.id) // 输出: 123 </script> ```[^3] --- ### 二、URL查询参数(query) 1. **递参数** 使用`path`或`name`跳转均可,参数会显示在URL中: ```vue router.push({ path: '/target', query: { keyword: 'vue3', page: 1 } }) ``` 生成的URL:`/target?keyword=vue3&page=1`[^2] 2. **接收参数** ```vue const route = useRoute() console.log(route.query.keyword) // 输出: vue3 ``` --- ### 三、通过路由Props 在路由配置中启用`props`,直接将参数映射为组件props: ```js { path: '/user/:id', component: UserPage, props: true // 自动将params映射为props } ``` 组件接收: ```vue <script setup> defineProps(['id']) // 直接使用id属性 </script> ``` --- ### 四、父组件通过`router-view` 父组件向所有子路由递数据: ```vue <template> <router-view :data="sharedData"></router-view> </template> ``` 子组件通过`defineProps`接收: ```vue <script setup> defineProps(['data']) </script> ```[^5] --- ### 注意事项 1. `params`需要预定义路由参数,适合敏感数据 2. `query`参数可见于URL,适合非敏感数据 3. 递对象需序列化:`JSON.stringify(obj)`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值