将值传递给路由 [英] Pass values to route

问题描述

我有一个物品清单.当用户点击一个项目时，用户将被带到项目详细信息页面.

I have a list of items. When the user clicks on an item, the user will be taken to item details page.

我想将包含项目详细信息(如项目的图像 URL)的对象传递给路由.但是，我不想在路由 url 中公开它.

I want to pass an object containing item details(like item's image URL) to the route. However, I don't want to expose it in the routes url.

如果有办法做类似<a route-href="route: details; settings.bind({url: item.url})">${item.name}</a> 那将是金子.

If there were a way to do something like <a route-href="route: details; settings.bind({url: item.url})">${item.name}</a> that would be gold.

我已经看到如果在路由配置中定义，属性可以传递给路由.但是，我不知道如何从模板中更改它.另一种方法是定义一个单例并将值存储在那里并将对象注入目标路由.

I have seen properties can be passed to a route if defined in the route configuration. However, I don't know how to change that from the template. Another way could be is to define a singleton and store the values there and inject the object to the destination route.

有没有办法将值从视图传递给路由(如角度 ui-routers param 对象)?

Is there a way to pass values to routes from view (like angular ui-routers param object)?

推荐答案

好的，所以我想出了一种方法来实现更接近我想要的东西:

Okay so I figured out a way to achieve something closer to what I wanted:

目标:将数据传递给路由，而不将它们暴露在地址栏中.

Objective: Pass data to route without exposing them in the location bar.

假设我们有一个用户列表，我们希望将 username 传递到用户的个人资料页面，而不将其定义为查询参数.

Let's say, we have a list of users and we want to pass the username to the user's profile page without defining it as a query parameter.

在view-model中，先注入Router，然后向目的路由器添加数据:

In the view-model, first inject Router and then add data to the destination router:

goToUser(username) {
    let userprofile = this.router.routes.find(x => x.name === 'userprofile');
    userprofile.name = username;
    this.router.navigateToRoute('userprofile');
}

现在当路由更改为userprofile时，您可以访问路由设置作为activate方法的第二个参数:

Now when the route changes to userprofile, you can access the route settings as the second parameter of activate method:

activate(params, routeData) {
    console.log(routeData.name); //user name
}

这篇关于将值传递给路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！