跳转传参
我们可以通过两种方式,在跳转的时候把所需要的参数传到其他页面中
- 查询参数传参
- 动态路由传参
查询参数传参
如何传参?
注:
① 参数的值不用加""
② key与=与参数名之间不要加空格!!
<router-link to="/path?参数名=值"></router-link>
//有多个参数使用&链接
如何获得参数
1. Vue2
$route.query.参数名
在created()之中获取:
this.$route.query.参数名
2. Vue3
使用VueRouter提供的useRoute方法来获得route实例
// 导入方法
import { useRoute } from 'vue-router';
// 获得route实例
const route = useRoute()
参数获取:route.query.参数名
动态路由传参
传参方式
- 配置动态路由
动态路由后面的参数可以随便起名,但要有语义
path: '/path/:参数名'
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words',
component: Search
}
]
})
- 配置导航链接
to="/path/参数值"
获得参数
1. Vue2
$route.params.参数名
params后面的参数名要和动态路由配置的参数保持一致
在created()之中获取:
this.$route.params.参数名
2. Vue3
使用VueRouter提供的useRoute方法来获得route实例
// 导入方法
import { useRoute } from 'vue-router';
// 获得route实例
const route = useRoute()
参数获取:route.params.参数名
总结
查询参数传参 VS 动态路由传参
- 查询参数传参 (比较适合传多个参数)
- 跳转:to=“/path?参数名=值&参数名2=值”
- 获取:
$route.query.参数名
/route.query.参数名
- 动态路由传参 (优雅简洁,传单个参数比较方便)
- 配置动态路由:path: “/path/:参数名”
- 跳转:to=“/path/参数值”
- 获取:
$route.params.参数名
/route.params.参数名
注意:动态路由也可以传多个参数,但一般只传一个
声明式导航跳转时, 有几种方式传值给路由页面?
- 查询参数传参(多个参数)
- 动态路由传参(一个参数,优雅简洁)
使用useRoute()创建route实例相当于$route
标签:传参,useRoute,route,传参及,参数,跳转,path,路由 From: https://blog.csdn.net/m0_73883323/article/details/143562026