a标签带参数跳转页面，并在跳转页面接受参数

已于 2022-04-27 15:50:16 修改
阅读量5.3k 收藏 7
点赞数 3
文章标签： javascript 前端
于 2022-04-27 15:47:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41964720/article/details/124451838
版权
本文介绍了如何使用JavaScript中的window.location对象来获取当前页面URL的相关信息，包括协议、主机名、路径等。同时，展示了如何从带参数的a标签中获取并解析跳转链接的参数，例如在other.html中接收并打印出a标签中的id参数。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

获取网页中url属性使用的是window.location对象

windows.location对象的属性 

属性描述
herf返回的是当前页面的整个url
protocol返回的是url的协议
hostname返回的是主机名（域名）
host返回的是主机名（域名）包含端口号
port返回的是主机端口
pathname返回的当前页面的路径名
search返回的是？后面的部分（包含？）
hash返回锚点（从#号开始）

点击a标签带参数跳转到other.html

<body>
  <a href="./other.html?id=1">跳转</a>
</body>

在other.html中接受a标签中的参数

<body>
  <script>
    // 用=将路由参数分割成数组
    let idArray = window.location.search.split('=');
    console.log(idArray);//[?id,1]
    // 获取路由的参数
    let assetId = idArray[1];
    console.log(assetId);//1
  </script>
</body>

grapelet_kmw
关注
a标签携带参数跳转
qq_42202710的博客
02-26 3535
a标签的href属性的url后面拼接需要的参数 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="b.html?id=123">带参数去b...
若依管理系统页面带参数跳转路由怎么写
m0_60485096的博客
08-12 1279
想写通过高德地图接口实现驾车路线规划，本来是两个页面想解决同一个页面不能用多个key（当然，后来不需要了，一个页面一个key解决了）不重要了，总之学到了新知识，现在有两个map.vue和Mapmap.vue页面，我们想从map.vue页面通过@click="Mmap"的button按钮跳转到Mapmap.vue并把经纬度传过去。map页面的路径：D:\project\RuoYi-Vue\ruoyi-ui\src\views\booksys\Maps\map.vue。
js 监听a标签跳转页面，并携带自定义参数
PrimaryColor
11-09 1862
【代码】js 监听a标签跳转页面，并携带自定义参数。
HTML中的＜a＞＜/a＞标签除了跳转页面以外还有一个很牛逼的功能就是，两个html页面之间传递参数
aA20030316的博客
03-31 197
HTML中的<a></a>标签除了跳转页面以外还有一个很牛逼的功能就是，两个html页面之间传递参数
a标签跳转加入参数总结
qq_41393222的博客
05-25 2752
项目场景： 在C#开发中，用到的是.asp作为前端页面，需要为绑定的某个数据提供跳转功能。 问题描述 无法跳转，跳转后没有携带参数 原因分析： 可能是引号的问题， 变量和引用变量没有分清楚，注意看下面的例子。 解决方案： 1. 利用Repeater ItemTemplate出来的数据和从url获取参数的数据直接加参数，（参数在绑定的数据中可以找到）正常写就可以的。 <td> <a href="testSkip.aspx?NameId=...
＜a＞标签带参数跳转并在下一个页面接收
qq_41936090的博客
10-16 1062
<script type="text/javascript"> var a=GetRequest(); console.log("id:"+a['id']) //打印出传过来的id function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str =
a标签行内动态携带参数跳转
weixin_45557439的博客
06-07 405
【代码】a标签行内动态携带参数跳转。
a标签跳转页面携带参数并隐藏参数
wlijun_0808的博客
12-27 2930
总体思路 将参数保存到session中 跳转页面之后，在另一个页面中取出参数。 // 第一个页面 <script type="text/javascript"> <!-- 携带参数跳转页面，将参数进行加密，保存在session中--> function postToPage(id){ window.localStorage.setItem("communityId",id); } </script> &l
a标签跳转页面传参问题
热门推荐
程序猿_hw的博客
12-20 2万+
在一个html页面想要跳转到另一个html页面，并且想要传递参数过去。该怎么办？ 解决办法： 直接跳转好像不行，因为我的事web项目，所以我通过Controller方法里面实现。 知道怎么直接跳转可以告诉我一下。 第一步： &lt;a href='/spot/detail?id=" + item.Id + "'&gt;&lt;/a&gt;  item.Id是我从后台获取的数据。 第...
AngularJS页面带参跳转及参数解析操作示例
10-19
在Web开发中，经常需要从一个页面跳转到另一个页面，并在跳转的过程中传递参数。AngularJS通过内置的服务（如$location服务）和控制器（controller）来实现这一功能。 首先，在页面带参跳转的操作中，可以通过修改...
vue从一个页面跳转到另一个页面并携带参数的解决方法
12-29
1.需求： 点击商场跳转到商业体列表 ...a标签中添加跳转函数 <a><i class=sIRicon></i>商场</a> toMallInfo: function(mallCode){ this.$router.push({ path: '/propertyInfo/mall/mallList', // name:
django跳转页面传参的实现
09-24
在实现细节上，还提到了在Django视图中处理登录和页面跳转的逻辑，如使用authenticate()函数验证用户身份，并使用login()函数进行用户登录，再通过redirect()函数和reverse()函数来实现带参数的页面跳转。...
html中a标签根据一个参数跳转不同的页面
MuYIShan1的博客
04-09 2133
html中a标签根据一个参数跳转不同的页面 a标签 a标签通过调用fun1()方法来跳转不同页面 <a href="javascript:void(0);" onclick="fun1(data))" >跳转</a>" fun1()方法 function fun1(data) { if("参数1"==data) { window.location...
a标签跳转页面传参
woshishui099的博客
09-23 2299
a标签跳转到B页面 B页面 <script type="text/javascript"> var sHref = window.location.href; var args = sHref.split("?"); var retval = ""; var str = args[1]; args = str.split("&"); for (var i = 0; i < args.l
笔记：a标签携带参数跳转并在跳转页面接收参数
简析的博客
07-10 8983
1. <!--点击图片跳转到b页面 并将参数id传到b页面--> <a href="urlb?id=1"><img src="123.jpg"/></a> //在b页面接收a页面传过来的id值 <script> var id= window.location.href.split("?")[1].split("=")[...
前端：a标签的跳转方式
weixin_46001736的博客
03-05 7336
前端：a标签的跳转方式
a标签携带参数跳转并在跳转页面接收参数
weixin_44754351的博客
02-07 2398
<!--点击图片跳转到b页面 并将参数id传到b页面--> <a href="urlb?id=1"><img src="123.jpg"/></a> //在b页面接收a页面传过来的id值 <script> var id= window.location.href.split("?")[1].split("=")[1]; </script> <!--encodeURI()传输中文，上个传输方式，接受到的会乱码，编译后再
a标签页面跳转传参并在另一个页面接收参数
张杰伦的博客
12-18 7028
// page2页面获取传来的id值 function getQueryString(name) { var reg = new RegExp(’(^|&)’ + name + ‘=([^&]*)(&|$)’, ‘i’); var r = window.location.search.substr(1).match(reg); if (r != null) { return unescape(r[2]); } return null; } 这样调用：（传的值就是a标签？后面的键名）.
常见页面中a标签的url带参页面跳转
zc15779595171的博客
08-30 9535
1.参数为普通字符串：&lt;a href="&lt;c:url value="/BrMgrServlet?act=exam&amp;testId=1"/&gt;"&gt;查看&lt;/a&gt; 2，参数为变量：&lt;a href="&lt;c:url value="/BrMgrServlet?act=&lt;%exam%&gt;&amp;test
maui mvvm 带参数跳转页面代码 接受代码写在 viewmodel
最新发布
05-23
### 关于 Maui MVVM 架构中带参数页面跳转的实现 在 .NET MAUI 的 MVVM 架构下，可以借助 `Shell` 导航服务来实现页面间的跳转，并通过传递参数到目标页面的 ViewModel 完成数据交互。以下是详细的代码实现和说明。 --- #### 1. 页面跳转并传递参数 在源页面的 ViewModel 中，可以通过 `Shell.Current.GoToAsync` 方法发起导航请求，并附带所需的参数。以下是一个典型的实现示例： ```csharp // SourcePageViewModel.cs public class SourcePageViewModel : INotifyPropertyChanged { public ICommand NavigateCommand { get; } public SourcePageViewModel() { NavigateCommand = new Command(async () => await NavigateToTargetPage()); } private async Task NavigateToTargetPage() { // 准备要传递的参数 var parameter = "Hello from Source Page"; // 发起导航请求并将参数作为字典项发送 await Shell.Current.GoToAsync(nameof(TargetPage), true, new Dictionary<string, object> { ["Greeting"] = parameter }); } public event PropertyChangedEventHandler PropertyChanged; } ``` 上述代码展示了如何从当前页面跳转至目标页面 `TargetPage`，并通过查询参数的形式传递了一条消息[^1]。 --- #### 2. 在目标页面 ViewModel 中接收参数 当导航到达目标页面时，其对应的 ViewModel 可以通过构造函数注入的方式获取传递过来的参数。具体如下所示： ```csharp // TargetPageViewModel.cs public class TargetPageViewModel : INotifyPropertyChanged { private string _greeting; public string Greeting { get => _greeting; set { if (_greeting != value) { _greeting = value; OnPropertyChanged(nameof(Greeting)); } } } public TargetPageViewModel(IDictionary<string, object> queryParameters) { // 检查是否存在指定键值的参数 if (queryParameters.ContainsKey("Greeting") && queryParameters["Greeting"] is string greeting) { Greeting = greeting; } } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } ``` 在这个例子中，`TargetPageViewModel` 的构造函数接受一个包含查询参数的字典对象，并从中提取名为 `"Greeting"` 的字符串参数[^2]。 --- #### 3. 配置 AppShell 支持路由 为了让上述导航逻辑生效，需要在 `AppShell.xaml` 文件中定义好各页面的路由名称及其绑定关系： ```xml <!-- AppShell.xaml --> <Shell ... Route="SourcePage"> <!-- 主标签栏 --> <TabBar> <ShellContent Title="Source" ContentTemplate="{DataTemplate local:SourcePage}" Route="SourcePage"/> <ShellContent Title="Target" ContentTemplate="{DataTemplate local:TargetPage}" Route="TargetPage"/> </TabBar> </Shell> ``` 此处明确了两个页面的路由路径分别为 `SourcePage` 和 `TargetPage`，这使得它们能够被正确识别和访问[^3]。 --- #### 4. 绑定数据显示到 UI 最后，在目标页面 XAML 中绑定显示接收到的消息内容即可： ```xml <!-- TargetPage.xaml --> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="YourNamespace.TargetPage"> <VerticalStackLayout> <Label Text="{Binding Greeting}" FontSize="Large" HorizontalOptions="Center" /> </VerticalStackLayout> </ContentPage> ``` 这样就可以动态更新界面上的文字内容为传来的问候语句[^4]。 --- ### 总结 综上所述，通过结合 `.NET MAUI` 提供的 `Shell Navigation API` 与依赖注入机制，可以在遵循 MVVM 设计模式的前提下轻松达成跨页面间的数据传输需求。这种方法既保持了良好的分离关注点原则又提高了应用的整体灵活性。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值