声明式导航传参详情

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拿值

相关推荐
DebugKitty15 分钟前
C语言14-指针4-二维数组传参、指针数组传参、viod*指针
c语言·开发语言·算法·指针传参·void指针·数组指针传参
爱分享的程序员26 分钟前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉27 分钟前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
Bio Coder29 分钟前
R语言中 read.table 和 read.delim 之间的区别
开发语言·r语言
草履虫建模42 分钟前
RuoYi-Vue 项目 Docker 容器化部署 + DockerHub 上传全流程
java·前端·javascript·vue.js·spring boot·docker·dockerhub
LZQqqqqo2 小时前
C#_ArrayList动态数组
开发语言·windows·c#
睿思达DBA_WGX2 小时前
Python 程序设计讲义(27):字符串的用法——字符串的常用操作
开发语言·python
云天徽上2 小时前
【数据可视化-74】电信用户流失数据可视化分析:Python + Pyecharts 炫酷大屏(含完整的数据,代码)
开发语言·python·信息可视化·数据挖掘·数据分析·数据可视化·pyecharts
阿丽塔~2 小时前
【vue3+vue-pdf-embed】实现PDF+图片预览
javascript·vue.js·pdf
鲁Q同志3 小时前
java导入pdf(携带动态表格,图片,纯java不需要模板)
java·开发语言·pdf