vue3.0入门二（路由配置及传参）

Kishn

于 2021-07-31 12:04:22 发布

阅读量2.3k

点赞数 1

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44104659/article/details/119273482

版权

本文介绍了Vue3.0项目中如何配置页面路由，包括在src/router/index.js中设置路由路径。接着讲解了路由传参的方式，通过useRouter和router.push({})进行query传参，强调query传参的字符串类型特性。最后，文章详细阐述了如何使用useRoute获取路由传参，指出params传参与query传参的区别，params传参在刷新后会消失。

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

一、配置页面路由

在创建vue3.x项目时，选择Router
在这里插入图片描述
进到src => router => index.js
复制about部分并改写，这里的path就是路由

配置完成后在项目中把地址改写成刚刚配置的path即可：

二、路由传参

在这里插入图片描述
1 从’vue-router’ 中 import useRouter （类似react的hocks）
2 let router = useRouter()
3 router.push({ }) 和vue2.x是一样的
要注意的是这里用的query传参，qurey 传递的参数都是字符串类型，也可用params传参

三、获取路由传参

在这里插入图片描述
1 从’vue-router’ 中 import useRoute , 要注意的是，这里和第二步不是一样的
useRouter 相当于全局路由， useRoute 是当前页面路由
2 let route = useRoute()

总结：
query 传参类似get请求刷新传参仍然在地址栏
qurey 传递的参数都是字符串类型
query 传参可用path ,name params传参只可用name
params 传参地址栏不显示刷新后参数消失
在这里插入图片描述