I need to open a page in new tab with defined parameters.
Before I used only one parameters and it works fine:
window.open(this.theRouter.generate('transactionDetails', { id: id }), '_blank');
But now I need to add two more parameters.
I tried the following:
window.open(this.theRouter.generate('transactionDetails', { id: id, localtimezone: this.localTimeZone, reporttimezone: this.reportTimeZone }), '_blank');
But as result I can see in URL this:
http://localhost:54072/index.html#/transactionDetails/28789?localtimezone=3&reporttimezone=0
What I do wrong? How I can generate url with some parameters?
Thanks in advance.
You have to decide how to pass parameters.
The way your example looks it seems your route declares the "id" parameter.
If you declare parameters, the most consistent way is to declare every parameter in an analogous way:
route: "transactionDetails/:id/:localtimezone/:reporttimezone",
this way you get something like this:
#/transactionDetails/123/1608260750758/1608260750758
another way is to use query string and not use router params:
route: "transactionDetails",
this way, you get the url: #/transactionDetails?id=123&localtimezone=1608260810884&reporttimezone=1608260810884
a working example is available at
https://codesandbox.io/s/aurelia-router-demo-forked-wyszo?file=/src/app.js:356-384
Regards.
Cristian
Related
I have a JobPosts/Index page with multiple GET parameter bindings to allow filtering: let's take CityId and IsRemote for example. I don't want these to be passed as query string parameters, instead I want to use friendly routes for them. So I have defined these:
options.Conventions.AddPageRoute("/JobPosts/Index", "cities/{cityId}/jobs");
options.Conventions.AddPageRoute("/JobPosts/Index", "remote-jobs");
options.Conventions.AddPageRoute("/JobPosts/Index", "jobs");
The routes work just fine when I type them in the browser and the CityId one is bound properly, but two things are missing.
First, there is no way to specify a default value for my IsRemote param, which I want to set to true ONLY when using the remote-jobs URL.
And second, when trying to generate a URL like this:
<a asp-area="" asp-page="/JobPosts/Index" asp-route-cityId="#Model.CityId"></a>
I get the following URL:
https://localhost:44391/jobs?cityId=2265885
When what I actually expect is:
https://localhost:44391/cities/2265885/jobs
So it looks like the tag helper or the part responsible for constructing the URL doesn't look at all at the different routes to try and get a best match based on the list of parameters. Actually, it will always use the last page route defined for that page.
Nor do I have the option anywhere to specify a route name for the page route and then use asp-route to explicitly say which route I want.
Any ideas how to achieve that? Or if it's something that's on the roadmap for Razor Pages?
EDIT: Hardcoding the href is not an option. I want this to go through the proper routing services as there are other things to be done as well, like generating culture-specific URL for non-english users (eg. {cultureId}/cities/{cityId}/jobs - this is done through route conventions. Hardcoding the href would obviously bypass that.
There is a easy way to set IsRemote default value.
public bool IsRemote { get; set; } = true;
This tag asp-page will link to Page /JobPosts/Index.csthml directly,
https://localhost:44391/JobPosts?cityId=2265885
= https://localhost:44391/JobPosts/Index?cityId=2265885
If you are looking forward the URL https://localhost:44391/jobs?cityId=2265885
you could try this a tag to request.
Go to JobPosts
———————————————————————————————
Using a middleware to handle /remote-jobs
app.Run(next => async context =>
{
if (context.Request.Path == "/remote-jobs")
{
return View with default IsRemote
}
});
I’m writing my first vue-app and while implementing the filters a lot of questions arise.
I have created lists with checkboxes for each property. The checkboxes have a change-event to adjust the url and send a get-request. One key can have several values. How can I implement this with vue?
A first test to adjust the URL looked like this:
router.push({ name: 'transactions' , query: { property: item.value} });
This works fine with one value, but I want to have multiple values for one key.
Many pages solve this with: xy.com/z?property=x%y
I could not find out if this scheme is only recommended or if it has to be solved that way. How I can implement it with vue I could not find out too.
I would also like to know how I can extend the route. The following statement always overwrites the URL instead of extending it.
this.$router.push({ name: 'transactions', query: Object.assign({}, this.$route.query, { property: item.value })});
I am grateful for any help
I'm encountering an issue with vue-router.
I got a list of posts in the homepage. When I click on one of them, it redirects to the post page such as :
<router-link :to="{ name: 'article', params: {id: article.id, slug: article.slug } }"></router-link>
Everything is working perfectly, I can retrieve the data of the correct article using this.$route.params.id in a getter.
My issue : When I reload on an article page, this.$route.params.id is undefined, which causes the entire application to crash.
How can I save the router.params despite a page reload ?
What backend are you using? You need to enable history mode on your router, as well as make some additional configuration changes on your backend web server. Please refer to this link for the additional server side configuration changes you will need to make for this to work properly.
Also, please make note of this 404 caveat when using history mode..
Edit: you could try something like this since the ID remains persistent in the URL: Look for the solution from MIKE AXLE
I don't know if anyone else if facing the same issue, but I was having a problem getting route params on refresh. The route parameter I was trying to get was an ID number and I use that ID to fetch data and populate the page. I found (through many console logs) when I refreshed, the number was turning into a string and thats why the page was not working. I sorted it out but casting the ID to number before using it:
Number($route.params.id)
You can also use query instead of params
<router-link :to="{ name: 'article', query: {id: article.id, slug: article.slug } }"></router-link>
and to get value on redirecting page
this.$route.query
I'm not sure what is your route definition, the problem can be that only one of the params presented in the route URL (e.g. /article/:slug).
When you invoke a route (by clicking on router-link or calling router.push), you passing both params directly and they persist in the memory. That's why both are accessible.
But when you reload the page - everything that Vue can do is to parse your URL.
Means only one param parsed because only one param is present.
As a solution you can:
use both params in the route URL (e.g. /article/:id/:slug);
or use one param and call your API to retrieve remaining information (e.g. get id by slug if your route is /article/:slug).
I had the same issue pass the url in router
/article/:id/:slug
you will not loose your params after resfresh because whenrefreshng vue will take only data from url and forget if you passed params
You should route like this:
{
path: '/article/:id/:slug',
name: 'article',
}
In your view when routing do it like this:
this.$router.push({ name: 'article', params: { id: articleID, slug: articleSlug}});
You're welcome! 😉
Hi i need some help for this issue, I need to run:
exports.someFunction = function () {
// i need call a route like this.
app.route('api/getdata');
};
I need call some route in express function. How can I do it?
I'm assuming that /api/getdata returns some sort of data (in a format like JSON) you need to use. In that case, it is pretty simple, just use Node's excellent unirest library. I find Node's http a little advanced for this case. Assuming that this is a GET request, it would look something along the lines of:
unirest.post('http://example.com/api/getdata').end(function (response) {
console.log(response.body);
});
Of course, you can use Node's http.get if you wanted or any other HTTP library you like.
This is essentially a continuation of the question here: Nodejs Passport display username.
app.get('/hello', function(req, res) {
res.render('index.jade', { name: req.user.username });
});
So users log in via PassportJS, and goes to index.jade, which contains #{name} in the body, which will be replaced by the value of req.user.username.
Question: Is it possible to use the value of req.user.username in index.jade's JavaScript? I tried assigning its value to a variable but it doesn't work.
I have been using the trick of having a hidden input with #{name} as value:
input(type='hidden', id='variableName', value='#{name}')
Then JavaScript can access this value using:
$("#variableName").val()
This works. But does it have any potential downside like security issues? What is the right way to do this?
You have a few options. One of them is what you did and put the value inside you html. You can also solve it by doing:
script
window.name = #{name};
This will create an inline script that sets the variable. The other option you have is using ajax. That means you probably need to make an extra route to reply to that request.