vue3中的路由传参以及router和route的区别

莫尔道嘎老范

已于 2023-11-01 13:14:58 修改

阅读量3.8k

点赞数 2

分类专栏：使用方法文章标签：前端 vue

于 2022-03-04 11:17:13 首次发布

本文链接： https://blog.csdn.net/weixin_44134588/article/details/123259946

版权

使用方法专栏收录该内容

12 篇文章 0 订阅

订阅专栏

首先要区分route和router的区别:
vue-router v4+中提供useRoute和useRouter两个API

在这里插入图片描述

下面的route为useRoute的实例 ,router为useRouter的实例
所以,从A组件通过路由跳转到B组件时,
需要在A组件中通过router实例来进行路由跳转并传递参数(以params为例),
然后在B组件中调用使用route来进行接受
例:
A组件:

		import router from '@/router/index'
		------------------------------------------------
        // 提交注册按钮
        const submitForm = async () => {
            console.log(123);
            const flag = await signin()
            if (flag) {
                ElMessage.success('注册成功!')
                // 此处router 为router实例(由useRourer创建)
                router.push({ name: 'Login', params: { a: 1, b2 } })
            }
        }

B组件:

   import router from '@/router/index'
   import { useRoute, useRouter } from 'vue-router'
------------------------------------------------
   onMounted(() => {
            const route = useRoute()
            const router1 = useRouter()
            console.log('比较', router1 === router);
            console.log('route', route, "获取到的参数", route.params);
            console.log('router', router, "获取到的参数", router.currentRoute._value.params);
        });

在这里插入图片描述
得出结论 :使用useRoute得到的router 和使用createrouter创建的实例相同;
但是在B组件中想拿到传来的参数则必须
方法1:使用useRoute创建route实例来拿到prams参数,
方法2:使用router实例也就是router.currentRoute._value.params拿到传来的参数
在这里插入图片描述
除了使用param传参 ,还可使用query传参不同的是query传参时浏览器地址栏可见
使用query传参时将上面代码中的param换成query即可