声明式导航传参详情

1 动态路由传参

路由规则path ->/article/:aid

导航链接 <router-link to="/article/1">查看第一篇文章</router-link>

组件获取参数: this.$route.params.aid

如果想要所有的值,就用this. $route. params

注意:这两个必须匹配上

如果是多个参数,path :/article/:aid/:name就写两个参数

接收方式一:

在模板中接受:this可以省略

{{$route.pararms.aid}}

接受方式二:

在js中拿值

console.log(this.$route.params.aid)

2、 查询参数传参数

路径?参数1=值&参数2=值

路由规则path -> /路径

导航链接 <router-link to="/article?id=1">查看第一篇文章</router-link>

组件获取 this.$route.query.id

如果是多个参数,就用&(与):

/路径?参数1=值&参数2=值

<router-link to="/article?id=1&name=lisi">查看第一 篇文章</ router-link>

如果查询参数想拿到多个参数,可以打印两次

console. log(this. $route. query.id)

console. log(this .$route . query . name )

区别:

动态参数:(比较适合多个参数传参)

  • 跟路径有关系,传具体的值

  • 动态通过params拿值

查询参数:

  • 跟路径没有关系,是通过?拼接

  • 查询通过query拿值

相关推荐
Martin -Tang12 小时前
uniapp 实现录音操作,长按录音,放开取消
前端·javascript·vue.js·uni-app·css3·录音
Chen_harmony13 小时前
十九、数据在内存中的存储
c语言·开发语言
basketball61613 小时前
C 的 malloc/free 与 C++ 的 new/delete 一些区别
c语言·开发语言·c++
iiiiyu13 小时前
⾯向对象和集合编程题
java·大数据·开发语言·数据结构·编程语言
郝学胜-神的一滴13 小时前
Qt 高级开发 006: 架构全解 + 高效学习指南
开发语言·c++·qt·程序人生·架构
ZC跨境爬虫13 小时前
跟着 MDN 学 HTML day_58:(构建行星数据表——HTML表格高级实战指南)
前端·javascript·ui·html·音视频
Achou.Wang13 小时前
Concurrency patterns - Go 并发模式
开发语言·后端·golang
存在morning13 小时前
【GO语言开发实践】三 GO 工程化快速上手
开发语言·后端·golang
kyriewen13 小时前
用户打开飞行模式都能打开你的网站?Service Worker 做离线缓存,PWA 实战
前端·javascript·面试
雁迟13 小时前
第七章:R 向量用法(最核心数据结构)
开发语言·数据结构·r语言