Vue3.0使用JavaScript脚本实现Vue Router路由：页面跳转、获取URL参数

原创 已于 2024-12-18 17:49:08 修改 · 778 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2024-12-18 17:43:12 首次发布

 Vue 使用 Vue Router 路由系列文章：

《Vue使用Vue Router路由：开发单页应用》

《Vue使用Vue Router路由：通过URL传递与获取参数》

《Vue3.0使用JavaScript脚本实现Vue Router路由：页面跳转、获取URL参数》 

1、路由基础

在单页 Web 应用中，整个项目只有一个 HTML 文件，不同视图（组件的模块）的内容都是在同一个页面中渲染的。当用户切换页面时，页面之前的跳转都是在浏览器端完成的，这时就需要使用前端路由。

路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。

关于 Vue Router 路由的详细使用，请点击浏览文章：《Vue使用

最低0.47元/天 解锁文章
Vue使用Vue Router路由：通过URL传递与获取参数
pan_junbiao的博客
09-23 2875
Vue Router 路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。在实际的开发中，经常需要通过URL来传递参数，同时在 JavaScript 脚本中需要获取URL中的参数。
Vue3接收静态页面URL中携带的参数
NanChen的博客
06-02 2589
从HTML页面中的a链接里携带的参数要在vue3项目里接收到此参数目前有两个项目一个静态项目一个vue项目，我需要从静态页面的链接跳转到Vue项目中，并且这两个项目可以通过参数进行关联这里有两种方案：一种是将静态页面中的id存在本地，在vue中通过获取本地id传给接口从而渲染页面影响：可能会出现跨域第二种通过getUrlKey.js获取URL地址栏中跳转携带的参数。
vue 获取url里参数的两种方法小结
01-18
我就废话不多说了，大家还是直接看代码吧~ 第一种： const query = Qs.parse(location.search.substring(1)) let passport = query.passport; 第二种： var query=this.$route.query; let lat = query.lat; 补充知识：Vue通过query获取路由参数 现在来讲Vue通过query获取路由参数 可以看见com1组件里的路由参数为 name=zhangsan&job=teacher 使用 this.$route.query 来获取路由参数 现在就是利用que
Vue 3 + TypeScript: 如何通过 URL 参数在组件间传递数据
weixin_50407990的博客
06-20 950
通过以上示例，我们已经展示了如何在 Vue 3 + TypeScript 项目中使用查询参数和路由参数来在组件间传递数据。这种方法不仅简洁，还能借助 TypeScript 提供的类型检查提升代码质量。在实际项目中，合理使用 URL 参数可以极大地提高数据传递的灵活性和可维护性。希望这篇文章对你在 Vue 3 + TypeScript 项目中使用 URL 参数有所帮助！如果你有任何问题或建议，欢迎在下方留言。
vue3截取url数据方法
王佩健的博客
05-10 1837
const data = ref({}) function GetRequest() { //url例子：www.baidu.com?id="123456"&name="www"； var url = decodeURI(window.location.search); //?id="123456"&name="www"; var object = {}; if (url.indexOf("?") != -1)//url中存在问号，也就说有参数。
vue3获得url上的参数值
qq_34631220的博客
08-08 8494
【代码】vue3获得url上的参数值。
Vue使用Vue Router路由：开发单页应用
pan_junbiao的博客
09-23 2268
在单页 Web 应用中，整个项目只有一个 HTML 文件，不同视图（组件的模块）的内容都是在同一个页面中渲染的。当用户切换页面时，页面之前的跳转都是在浏览器端完成的，这时就需要使用前端路由。路由实际上就是一种映射关系。例如，多个选项卡之间的切换就可以使用路由功能来实现。在切换时，根据鼠标的点击事件显示不同的页面内容，这相当于事件和事件处理程序之间的映射关系。
VUE3.0(一)：vue3.0简介
chengcheng9876的博客
03-22 8335
VUE3.0(一)：vue3.0简介
解决vue+router路由跳转不起作用的一项原因
10-15
通过在服务器端配置`connect-history-api-fallback`中间件，可以确保所有的路由请求都能正确地加载到应用的入口文件，从而实现Vue Router的正常路由跳转。同时，这也确保了应用在刷新或直接输入URL时仍然能够正常...
vue3路由获取url参数
Leckun的专栏
12-15 2878
【代码】vue3路由获取url参数。
在 Vue 3 中获取当前网址的完整 URL 或部分信息
最新发布
繁若华尘的博客
02-22 3050
在 Vue 3 中获取当前网址的完整 URL 或部分信息，可以通过以下两种方式实现
Vue3.0路由跳转方式
bsegebr的博客
07-31 986
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。路由中的是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面。...
vue3获取页面跳转携带的参数
weixin_42456784的博客
02-08 3292
路径参数：适合传递必要的、与路由路径紧密相关的参数，会显示在 URL 中。查询参数：适合传递可选的、不影响路由匹配的参数，会显示在 URL 中。状态参数：适合传递敏感信息或不想暴露在 URL 里的数据，不会显示在 URL 中。
vue-获取url参数
yuyu_2019的博客
12-05 464
url： http://localhost:8080/#/test?session=AE6E96A890C53461629EA4AEA8A9B5A2&levelvalue=%25E4%25B9%259D%25E4%25BA%25AD%25E4%25B8%25AD%25E9%2598%259F&scopelevel=detachment let session = decodeURI(this.$route.query.session) let levelvalue = decodeURI(t
VUE项目获取url中的参数
热门推荐
u010227042的博客
03-15 1万+
获取url参数有两种情况： 情况一：内部页面之间互相传值 这里先讲情况一，因为同一项目内互相传值比较简单，假如要从A页面跳转到B页面，并传值。就要在A页面这么写 this.$router.push({name:"B",query:{ Id : this.tId , ... }}) 进入B页面之后，在B页面内这么写 this.Id = this.$route.query.Id; 就能将A页面的id传入B页面，进行数据调取。 情况二：外部跳转VUE项目时自......
vue3 cdn 的方式 ，通过 URLSearchParams 来获取参数的信息。
花花鱼的专栏
07-05 576
spring boot 通过接口给本地html（vue cdn方式）传值，并解析相关的传值参数，显示相关的信息。
Vue3获取路由参数、包含获取路径参数
weixin_46607967的博客
07-17 3462
该demo使用了重定向 把123和456 分别设置为id和name 通过路由传参 传递给重定向后的 url 路由。这里业务逻辑为 跳转到url页面 同时接收到123和456参数。如实际项目不需要 则按需修改 一条路由也可实现。route为路由信息 query为获取的路由参数。如果是通过url传参 可直接在组件内使用。在 url 页面中正常获取路由参数即可。如果参数直接在路径中 可参考。中对 url路由 进行修改。该条路由表信息使用了。
vue3.0 router 页面跳转实现
yinianjian2017的博客
12-24 2820
1、router/index.js 中声明（类似主配置文件注册） export default new Router({ routes: [ { path: '/', name: 'Login', component: Login }, { path: '/main', name: 'Main', component: Main } ] }) 从Login跳转到Main， Main的path为 /main 2、Login.vue中满足条件时跳转 引入router impo
基于Vue插件实现的简易Vue Router路由功能
router-plugin”项目正是围绕这一目标展开：通过从零开始手动实现一个简易版的 Vue 路由插件，涵盖 hash 路由与 history 路由两种模式，并结合 Vue 插件系统（Vue.use）将其封装为可复用的 npm 包，最终发布至 npm ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pan_junbiao

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值