vue刷新子页面,跳到主页,params传参引起的血案!
今天,算是真正认识了params传参,为什么说params传参引起了血案?
起因是这样的,我正在做一个登陆的模块,公司想根据url不同的参数来区分是什么类型的会议,
于是后端推荐我用params传参的方式来实现这一设计,于是我毫不犹豫的在longin的路由上加上了params参数:
path: "/:order",
name: "index",
component: () =>
import(/* webpackChunkName: "about" */ "./pages/index.vue"),
注意,我在path上加上了params参数
http://localhost:8090/bb
我这样访问了页面,这个bb是我随便写的参数,对应的是order
然后我在这一页跳到了另一个页面
http://localhost:8090/com2
该页面路由配置如下:
{
path:'/com2',
name:'com2',
component:()=>
import('./components/com1.vue')
},
然后我在这页面上随意的刷新了一下!!!!
结果跳到了刚才那个页面,也许很多大佬已经发现了问题所在,但是我却蒙了。。。
我一直把params当成了一种路由传参的方式,其实就是传参,但是它还有一个作用就是动态路由。。
this.$router.push({name:"com2"})
上面的方式虽然可以跳到一个新的页面,但是在我刷新的时候,注意url路径是这样的
http://localhost:8090/com2
我却回到了和http://localhost:8090/bb一样的页面,
原因是router将com2当成了/路径的params参数,所以回到了和http://localhost:8090/bb一样的页面,
大佬们称这种为动态路由,我却一下子没转过弯,整了半天。
哪种不能其它页面都不能刷新了吧,
于是我在默认路径上加上了第二个params参数
path: "/:order/:lang",
这样,我在http://localhost:8090/com2页面刷新时就不会跳到跟页面了,原因是,我想跳到跟页面必须是/aa/bb这样的格式,路由匹配不上跟页面,所以就避免了上述问题。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通