JavaScript

超轻量级php框架startmvc

浅析vue-router中params和query的区别

更新时间:2020-09-27 21:54:02 作者:startmvc
1.引入方式不同query要用path来引入this.$router.push({path:'test',query:{type:2,detail:'哈哈'}})params要用n

1.引入方式不同

query要用path来引入


this.$router.push({
 path: 'test',
 query: {
 type: 2,
 detail: '哈哈'
 }
})

params要用name来引入


this.$router.push({
 name: 'test',
 query: {
 type: 2,
 detail: '哈哈'
 }
})

2.url不同

query在url中显示参数

http://localhost:8080/detail?type=0&detail=哈哈 params在url中不显示参数

http://localhost:8080/detail

下面整理一下这两者的差别:

1、用法上的

  刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候,已经是$route而不是$router了哦!!

2、展示上的

  query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

query:       

params:    

总结

以上所述是小编给大家介绍的vue-router中params和query的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

vue中的params和query
基础信息
请求
SQL查询
加载文件
配置
错误
总耗时: 90.46ms 内存: 85.03KB
请求方法: GET
请求URI: /article_49617.html
控制器: index
方法: index
PHP版本: 8.0.26
服务器: nginx/1.24.0
GET参数
无GET参数
POST参数
无POST参数
请求头
Cookie: PHPSESSID=ak5mn1qsj453sgf8uifvnt0998
Accept-Encoding: gzip, br, zstd, deflate
User-Agent: Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
Accept: */*
Host: startmvc.com
Content-Length:
Content-Type:
Cookie
PHPSESSID: ak5mn1qsj453sgf8uifvnt0998
SELECT id,name FROM sm_article_category 0.00ms
SELECT a.id,a.category_id,a.title,a.keywords,a.description,a.update_time,ac.content FROM sm_article as a JOIN sm_article_content as ac ON ac.article_id = a.id WHERE a.id = '49617' LIMIT 1 0.00ms
SELECT tag_id FROM sm_tag_article WHERE article_id = '49617' 0.03ms
select id,title from sm_article where id in (select article_id from sm_tag_article where tag_id=52124) and status=1 order by id desc limit 20 0.00ms
总计:4 条SQL语句 总耗时:0.03 ms
1. /www/wwwroot/startmvc.com/public/index.php
2. /www/wwwroot/startmvc.com/startmvc/boot.php
3. /www/wwwroot/startmvc.com/startmvc/function.php
4. /www/wwwroot/startmvc.com/vendor/autoload.php
5. /www/wwwroot/startmvc.com/vendor/composer/autoload_real.php
6. /www/wwwroot/startmvc.com/vendor/composer/platform_check.php
7. /www/wwwroot/startmvc.com/vendor/composer/ClassLoader.php
8. /www/wwwroot/startmvc.com/vendor/composer/autoload_static.php
9. /www/wwwroot/startmvc.com/startmvc/core/Config.php
10. /www/wwwroot/startmvc.com/config/common.php
11. /www/wwwroot/startmvc.com/startmvc/core/Session.php
12. /www/wwwroot/startmvc.com/startmvc/core/App.php
13. /www/wwwroot/startmvc.com/startmvc/core/Exception.php
14. /www/wwwroot/startmvc.com/function/custom_function.php
15. /www/wwwroot/startmvc.com/function/global_function.php
16. /www/wwwroot/startmvc.com/startmvc/core/Request.php
17. /www/wwwroot/startmvc.com/startmvc/core/Middleware.php
18. /www/wwwroot/startmvc.com/startmvc/core/Router.php
19. /www/wwwroot/startmvc.com/config/route.php
20. /www/wwwroot/startmvc.com/app/home/controller/ArticleController.php
21. /www/wwwroot/startmvc.com/app/common/BaseController.php
22. /www/wwwroot/startmvc.com/startmvc/core/Controller.php
23. /www/wwwroot/startmvc.com/startmvc/core/Loader.php
24. /www/wwwroot/startmvc.com/startmvc/core/View.php
25. /www/wwwroot/startmvc.com/config/view.php
26. /www/wwwroot/startmvc.com/startmvc/core/Db.php
27. /www/wwwroot/startmvc.com/config/database.php
28. /www/wwwroot/startmvc.com/startmvc/core/db/DbCore.php
29. /www/wwwroot/startmvc.com/startmvc/core/db/DbInterface.php
30. /www/wwwroot/startmvc.com/runtime/temp/home/article/detail.php
31. /www/wwwroot/startmvc.com/startmvc/core/tpl/trace.php
总计:31 个文件
系统配置
运行环境: development
调试模式: 开启
时区设置: Asia/Shanghai
最大执行时间: 300秒
内存限制: 128M
上传限制: 50M
POST限制: 50M
字符集: UTF-8
错误报告级别: 32759
缓存状态
APC: 不可用
Memcached: 不可用
Redis: 不可用
OPcache: 可用
XCache: 不可用
File Cache: 可用
Autoload: 1 个加载器
Session: 已激活
框架配置
session: [Array]
trace: 1
debug: 1
default_controller: Index
default_action: index
异常信息
未捕获到异常
错误信息
未发现错误
应用运行正常,未发现错误或异常
90.46ms