声明式导航传参详情

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

相关推荐
微风中的麦穗6 小时前
【MATLAB】MATLAB R2025a 详细下载安装图文指南:下一代科学计算与工程仿真平台
开发语言·matlab·开发工具·工程仿真·matlab r2025a·matlab r2025·科学计算与工程仿真
2601_949146536 小时前
C语言语音通知API示例代码:基于标准C的语音接口开发与底层调用实践
c语言·开发语言
开源技术6 小时前
Python Pillow 优化,打开和保存速度最快提高14倍
开发语言·python·pillow
学嵌入式的小杨同学6 小时前
从零打造 Linux 终端 MP3 播放器!用 C 语言实现音乐自由
linux·c语言·开发语言·前端·vscode·ci/cd·vim
mftang8 小时前
Python 字符串拼接成字节详解
开发语言·python
jasligea8 小时前
构建个人智能助手
开发语言·python·自然语言处理
yuezhilangniao8 小时前
AI智能体全栈开发工程化规范 备忘 ~ fastAPI+Next.js
javascript·人工智能·fastapi
kokunka8 小时前
【源码+注释】纯C++小游戏开发之射击小球游戏
开发语言·c++·游戏
云栖梦泽9 小时前
易语言开发从入门到精通:补充篇·网络编程进阶+实用爬虫开发·API集成·代理IP配置·异步请求·防封禁优化
开发语言
java1234_小锋9 小时前
Java高频面试题:SpringBoot为什么要禁止循环依赖?
java·开发语言·面试