在Vue JS中从URL获取参数

Question

我正在SPA (Vue JS)和Laravel作为API工作。我想当用户收到电子邮件时，点击按钮，将他们发送到特定的路由(已经实现)。

所以现在我正在努力如何从Vue JS部分获得用户id。

https://domain.test/admin/users/dashboard/user/65/show

65从URL是用户ID，所以任何想法如何提取与Vue JS java脚本的ID ?

我没有使用vue路由器，这是Laravel路由，vue JS组件是从blade文件中渲染的。

我已经实现了像下面这样的东西，但是客户端拒绝…

https://domain.test/admin/users/dashboard/user/show?userId=65

Answer 1

let id = window.location.href.split('/').slice(-2)[0]

Answer 2

由于您已经在Blade文件中呈现页面，因此您应该已经可以访问用户ID服务器端。

在这种情况下，只需添加变量服务器端。例如:

<a :href="'https://domain.test/admin/users/dashboard/user/' + {{ 
$user->id }} + '/show'">Go to Dashboard</a>

Answer 3

要从url获取参数，可以使用vue router:

const routes = [
// dynamic segments start with a colon
{ path: '/users/:id', component: User },
]
const User = {
template: '<div>User {{ $route.params.id }}</div>',
}

这里是更多示例和vue路由器文档的链接:

https://router.vuejs.org/guide/essentials/dynamic-matching.html

你也可以只使用普通javascript获取参数，如:

const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m
//then you have to parse the url
const urlParams = new URLSearchParams(queryString);
const color = urlParams.get('color')
console.log(color);
// blue