My url re-updating after the push
I want to make this url:
www.abc.com/istanbul-taksim-otelleri?checkin=2019-05-08&checkout=2019-05-16&filters=meal_types:full,half,etc;stars:1,2,4
const query = {
checkin: '2019-05-08',
checkout: '2019-05-16',
filters:'meal_types:full,half,etc;stars:1,2,4'
}
this.router.push({query})
after this gettin like this
www.abc.com/istanbul-taksim-otelleri?checkin=2019-05-08&checkout=2019-05-16&filters=meal_types%3Afull,half,etc%3Bstars%3A1,2,4
do you have any idea ? how can fix it ?
See https://w3schools.com/tags/ref_urlencode.asp - %3A is just a URL-encoded colon. URL-encoding Strings is standard practice, and in most cases required in order to make a valid URL.
If you need to decode a URL, something like decodeURIComponent() could work for you, e.g.:
const uri = 'www.example.com/:";[]}'
const encodedURI = encodeURIComponent(uri)
console.log(encodedURI)
const decodedURI = decodeURIComponent(encodedURI)
console.log(decodedURI)
Related
Im testing some API and i want to use only part of the URL.
Some of the URL params are are unexpected so when im using request i want to ignore some params.
Here is an example:
cy.request(getApi(https://api.example.com/api/geo_insights/impressions?alt_source=true&lat=40.7129032&lng=-74.0063033&targeting_radius=2500))
I want to use only the value of targeting_radius param and ignore the values of the rest of the params, like : https://api.example.com/api/geo_insights/impressions?alt_source=true&lat=**&lng=**&targeting_radius=2500.
How can i do it?
Run some string splitting on the URL
const url = `https://api.example.com/api/geo_insights/impressions?alt_source=true&lat=40.7129032&lng=-74.0063033&targeting_radius=2500`
const urlBaseAndParams = url.split('?')
const paramSection = urlBaseAndParams[1].split('&')
const params = paramSection.split('&')
const lastParam = params[params.length-1]
const requestUrl = `${urlBaseAndParams[0]}?${lastParam}`
You can merge some of those steps, I just break it down for clarity.
I have a Vue app which needs to remove query parameter from url. Url looks like http://localhost:8080/campaigns/279707824dd21366?screenshot=1 Needs to remove screenshot param without redirect. So I found solution which looks like this:
if( this.$route.query.screenshot ) {
this.screenshot();
const query = this.$route.query;
delete query.screenshot;
this.$router.replace({query: null}).catch((error)=>{
console.log(error);
});
}
This throws me an error without redirect:
NavigationDuplicated: Avoided redundant navigation to current
location: "/campaigns/279707824dd21366?screenshot=1".
I also tried this:
if( this.$route.query.screenshot ) {
this.screenshot();
const query = this.$route.query;
query.screenshot = null;
this.$router.replace({query});
}
What is wrong with this code? Thanks for any help.
I'm trying to get a vuejs store variable like this :
const pathFile = `#pathFile_${this.devisDTO.code_produit}`;
const pathApp = this.$store.state.parameters.urls.${pathFile};
So in the second line ${pathFile} is not interpreted in that way. Please could you help on how to write this ?
In JavaScript ${string_name} is used inside template strings (1). If you want to access the value of a dictionary based on a string's content you should use the square brackets syntax. In your case
this.$store.state.url[path_file]
On a side note I suggest you to use store getters to access variables.
(1): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
pathFile is a normal variable. Remove the brackets from it.
const pathFile = `#pathFile_${this.devisDTO.code_produit}`;
const pathApp = this.$store.state.parameters.urls.pathFile;
you need to modify your code remove brackets from parameters.urls.${pathFile} to .urls.pathFile;
here is code..
const pathFile = `#pathFile_${this.devisDTO.code_produit}`;
const pathApp = this.$store.state.parameters.urls.pathFile;
That's not valid javascript. I am guessing you meant to write the following:
const pathFile = `#pathFile_${this.devisDTO.code_produit}`;
const pathApp = this.$store.state.parameters.urls[pathFile];
I need to generate a vue-router link that contains an array with string keys as a query parameter.
I want the resulting URL to look like
url?param[key]=value
I need these kinds of query parameters to match an existing backend infrastructure, so renaming/refactoring them is not an option.
I've tried to use a router-link like the one below, but the param object just get's serialized as %5Bobject%20Object%5D. Maybe there is an option to change the way this object is serialized within vue-router?
<router-link :to="{name: 'xyz', query: {param: 'value'}}">link</router-link>
Does anyone have helpful input? Thank you :)
After spending some time vue-router GitHub issues and their docs, I figured it out.
When creating your RouteConfig, import qs and set the parseQuery and stringifyQuery methods as follows:
parseQuery: (query: any): object => {
return qs.parse(query);
},
stringifyQuery(query: any): string {
let result = qs.stringify(query, {encode: false});
return result ? ('?' + result) : '';
}
It is important to include {encode: false}, otherwise the square brackets will get URL encoded.
Addition to Martin's comment,
Exact Router config should be :
// https://github.com/ljharb/qs
import qs from 'qs';
const router = new Router({
routes: [
// ...
],
// set custom query resolver
parseQuery(query) {
return qs.parse(query);
},
stringifyQuery(query) {
var result = qs.stringify(query);
return result ? ('?' + result) : '';
}
});
and query parameters inside routes will be automatically converted url string and parsed as an object when accessing $router.query .
Similar to this
I have the following route:
app.get('/blogpost/:link', middleware.loginCheck, blog.postBlogs);
Using req.params.link returns the link parameter.
When I ask for the req.params.link in middleware.loginCheck I receive an undefined.
It seems that req.params.link is not being passed through to the middleware because I can access it like so:
app.get('/blogpost/:link', function(req, res){console.log(req.params.link)});
Whats the problem with my middleware?
FINAL
a(href='/post/#{post.link}') #{comments} renders /post/myPostLink
{#post.link} only renders the variable substitute and does not add an extra /
a(href='/post#{post.link}') #{comments} renders '/postmyPostLink'
a(href='/post/' + post.link) #{comments} renders /post/myPostLink
So both #{post.link} or post.link work the same and req.params.link works on both calls.
UPDATE_2
I am using jade to render the web page. Inside there I have an anchor tag written as so: a(href='/post/#{post.link}) #{comments}
The achor tag works fine and directs me to the correct page. But express does not like this representation. Instead, if I change the anchor tag to a(href='/post/' + post.link) #{comments} req.params.link works fine.
UPDATE_1
req.param('link') works for this case.
There is no problem with the middleware.
But why wouldn't req.params.link work?
OK, we went back and forth in the comments a bit, but now my guess is that the problem is double slashes in your URL
a(href='/post/#{post.link}') #{comments}
That is A) missing a closing quote, but I assume that is a typo just in your question here, not in your code. and B) the real problem is that post.link includes a leading slash, so you end up with this HTML:
<a href='/post//post_link_name'>42</a>
Thus express is parsing that as an empty :link parameter. Change your jade to this:
a(href='/post#{post.link}') #{comments}
and you should get back in business.
In recent versions of express you can use router.param() as your middleware to specifically work on the req.params:
var router = express.Router();
router.param( "nickname", function (req, res, next, nickname) {
console.log( "nickname: ", nickname );
next();
});
router.get( "/user/:nickname", myController.method );
what does the signature of middleware.loginCheck look like? It needs to return a function(req, res, next)