如何在 JavaScript 中获取路由参数？

Posted 2023-03-05

【中文标题】如何在 JavaScript 中获取路由参数？

【英文标题】：How to get route parameter in JavaScript?

【发布时间】：2013-12-16 15:42:45

【问题描述】：

我有一个启用 URL 重写的 ASP.NET 网站。我知道如何使用 C# 获取路由参数：

Page.RouteData.Values["id"] as string;

但我不知道如何从 javascript 中获取它？以下是我重写的链接格式：

http://www.domain.com/topic/id/title

我想使用 JavaScript 获取这个 id 字段。请帮忙！

更新

我有这个获取请求参数的代码。

function getParameterByName(name) 
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));

如何修改获取路由参数？

【问题讨论】：

查看这篇文章，我想你会在那里找到解决方案：link

URL 参数是不同的东西。我不认为它会起作用。

如果你的格式是http://www.domain.com/topic/id/title，那么你为什么不在一个字符串中window.location.href；在'/'上拆分它；然后访问特定的索引。

@srvikram13 请举例说明你到底想说什么。

@AishwaryaShiva 检查我在下面发布的解决方案。

【参考方案1】：

function getValueAtIndex(index)
    var str = "http://www.sample.com/234/Fiddle/test"; //window.location.href; 
    return str.split("/")[index];

console.log(getValueAtIndex(3));

更新

这是使用普通 JS 在路由中的索引处获取值的更简洁的方法：

    location.pathname.split('/')[index]
    

例如，对于当前页面，

location.pathname = '/questions/20302776/how-to-get-route-parameter'

您可以通过以下方式获取问题 ID：

location.pathname.split('/')[2]

// Notice that the index does not start from zero.

【讨论】：

如果使用虚拟目录，这有点糟糕。

我喜欢这样，但将字符串拆分为一个单独的数组变量，然后使用数组长度 - 提供的索引 - 1 作为数组索引。这样它就可以向后工作，因此索引 0 会返回“测试”，索引 1 会返回“小提琴”等。这将解决虚拟目录的问题。

【参考方案2】：

尝试以下方法：

const getRouteValueAt = (idx) => 

   const routeTokens = location.pathname.replace(/^\/+/g,'').split('/')
   //[questions,20302776,how-to-get-route-parameter-in-javascript]

   return routeTokens.length > idx ? routeTokens[idx] : undefined

用法

const routeName = getRouteValueAt(0); // questions
const routeId = getRouteValueAt(1); // 20302776