Coming from AngularJS I thought this would be easy enough in Vue.js 2 as well. But it seems this is difficult by design in Vue.
In AngularJS I can do this $location.search('my_param', null); which will effectively turn https://mydomain.io/#/?my_param=872136 into https://mydomain.io/#/.
In Vue I have tried this.$router.replace('my_param',null);, but it will only do https://mydomain.io/#/?my_param=872136 -> https://mydomain.io/#/my_param, leaving the empty my_param.
Isn´t there anyway in Vuejs2 to remove the query params from the Url? Should I resort to plain JS to achieve this?
router.replace() is to navigate by removing the current URL from the browser history stack and replace it with the argument route you pass to it.
The actual syntax is router.replace(url_location, onComplete, onAbort).
What you are doing is router.replace(my_param, null) which is removing the current URL from the history stack and replacing it with 'my_param' and for the onComplete callback you are passing a null
So do it like this:
this.$router.replace('/')
More info on programatic navigation
In the case that you have multiple query parameters the correct way to remove one of them would be:
const query = Object.assign({}, this.$route.query);
delete query.my_param;
this.$router.replace({ query });
#DaveIdito's answer given in a comment above has been valuable to me several times. Adding it as an answer in order to bring proper attention to it.
To only remove all of the the query params without loading again or changing history, use:
this.$router.replace({'query': null});
This worked for me pretty well. It replaces all the query parameter and just changes the route to path only.
router.replace(route.path);
Related
Current url is
/?type=1
I want to use router.push on this page.
this.$router.push('/?type=2');
But this gives NavigationDuplicated error.
I don't want to use params like
/:type
Aliraza already answered your questions but I am sharing this answer because I see your comments asking, component don't rerender, for rerendering components you need to watch params like this:
watch: {
'$route.params': 'functionToRunWhenParamsChange',
}
That's because it's not different from your current path.
If the value of type is different it won't give you NavigationDuplicated error.
you can separate query like below too to make sure it will be understandable by the framework:
this.$router.push({
path: '/',
query: { type: 2 },
});
Please see this GitHub issue. They're using this.$router.replace but I imagine it shares the same root cause as when you are using this.$router.push. The proposed solution / workaround is to use an empty catch chained to the $router call, so:
this.$router.push('/?type=2').catch(err => {})
EDIT
You can pass the query params as an object to the second parameter of this.$router.push as well:
this.$router.push({ query: { type: 2 } })
<router-view :key="$route.fullPath"
If you wanna change your url (I mean push to another web page) and reload that page, you should use this syntax:
window.location.href = "your-url"
GG
my current situation is that I have an app with a pre-existing user base. If at all possible I want to avoid breaking their existing links as it would provide the smoothest transition. Only problem is that the previous links are in the format: (server)/viewer/#/?id=12. I tried mocking up an example below:
CodeSandBox
Option #1: I can access my variables through the link:
https://pyczk.csb.app/viewer/?id=12
And I can make the desired format through the link:
https://pyczk.csb.app/viewer/#/?id=12
But I cannot combine the two. While I still have problems with the browser eating some of my characters like "/", I believe I can fix that through a CustomUrlSerializer. Moving past that when using my desired format my app no longer finds/recognizes my values. Is it possible to get access to my values when my URL is in my desired format and if so how?
Any and all help is greatly appreciated!
To get that id correctly you should use HashLocationStrategy then "/" will not be eaten. In your app.module set second parameter of RouterModule like that:
RouterModule.forRoot([], {useHash:true})
Then use that code from your example to get id.
this.activatedRoute.queryParams.subscribe(params => {
this.queryParamID = params["id"];
});
I have a page with an ion-navbar, when I navigate to the next page I use the following:
this.nav.push(SubCategoryPage, {
employeeModel: this.employeeModel
});
It passes the param parameter successfully to the next page.
When I am in the next page (SubCategoryPage), I update the parameter object (employeeModel). My question is, when I click the back arrow to return to the previous page, how do I pass the modified parameter object (employeeModel) back?
When back is clicked, the ngOnDestroy is called, do I use this, but then how do I pass the parameter object?
OR, is there some other scope I should put the object in? (How do you pass objects from one page to another, including back?) What's best practice?
Thanks
I recommending caching the object in a provider. That way, its properties will remain the same when navigating between your components. By caching, all I mean its a simple get and setter.
SOLVED:
in app.ts I need to set the object, then it is shared between pages
ionicBootstrap(MyApp, [EmployeeModel]);
ref: https://www.joshmorony.com/an-in-depth-explanation-of-providers-in-ionic-2/
I want to search on my page. Actually, my code is
$stateProvider
.state('aaa', {
url: '/aaa',
templateUrl: 'client/parties/views/aaa.ng.html',
controller: 'Aaa'
})
$urlRouterProvider.otherwise("/default");
And now, I want to search on my page, but the params MUST working with the URL.
How to use params when I have $urlRouterProvider.otherwise?
Actually, everything after /aaa/ in URL causes redirect to /default.
Important thing: I have more than 20 parameters, but when there're not selected, I don't want to pass it via URL. This is important because I think I can't do something like url: '/details/:param1:param2:param3:param4',
Can you help me?
Looking at the documentation for ui-router, it doesn't seem like it is possible to not have it redirect without having at least one parameter defined on the state's route.
To accomplish what you want, I think the best is to use a catch all parameter of some sort. It's either that, restricting deep-linking, or reducing the amount of parameters and manually defining it.
Define a catch all parameter as shown below. In this case the parameter is path redirects will not take place if there is nothing after "/files/":
'/files/{path:.*}' - Matches any URL starting with '/files/' and captures the rest of the path into the parameter 'path'.
'/files/*path' - Ditto. Special syntax for catch all.
Define one parameter on a new route, and then split the one parameter into multiple parameters in the controller.
Here's a rather standard way to set a route in Iron Router:
Router.route('/posts/:_id', {
name: 'postPage',
data: function() { return Posts.findOne({_id: this.params._id}) }
});
Experimenting around a little, beginner as I am, I tried:
Router.route('/posts/:whatever', {
name: 'postPage',
data: function() { return Posts.findOne({_id: this.params.whatever}) }
});
This works well, up to a point. True, whatever will scoop up whatever is after /posts/ as its value, and the data context will indeed be the same as before... but linking to specific posts now won't work!
So,
{{title}}
simply won't work doing it "my" way (linking to nothing at all).
I can't fully wrap my head around this, and I'm too much of a novice to grasp the source code for Iron Router, so my hope is that someone here can explain it in a manner that even a beginner like me can comprehend.
Preferably like something like this:
First {{pathFor 'postPage'}} looks inside the routes to find the one named postPage.
It sees that this route corresponds to /posts/ followed by something else.
Looking inside the data context it finds that only one post is returned, namely the one with the same _id as whatever comes after /posts/.
It understands that it should link to this post, cleverly setting the url to /posts/_id.
This is wrong, most likely, and it doesn't explain why it would work when whatever is turned into _id. But it would help me immensely to see it parsed in a similar fashion.
Edit: Cleaned up my question so it is easier to grasp.
There's a simple set of circumstances that together lead to confusion:
The Posts.findOne issue is explained by the fact that the first argument can be either a selector or a document _id. So it's not really a shortcut but rather a documented feature.
As you found, putting :something in the iron:router URL causes that value to be reported as this.params.something inside the route function. This also registers something as an parameter to that route, which brings us to how pathFor works.
The pathFor helper takes two inputs: first the name of the route (in this case 'postPage') and second an object of parameters, which can come either from the second argument as in {{pathFor 'postPage' params}} or from the data context like so: {{#with params}}{{pathFor 'postPage'}}{{/with}}.
Now, here's why passing in a document from the database works if you call the parameter _id but not if you call it whatever: the post object that you retrieved from the database _has an _id field, but it doesn't have a whatever field. So when you pass it into pathFor, it only passes along the correct _id if the parameter to the route also happens to be called _id.
Let me know if that makes sense, I agree that this is somewhat confusing and that this "shortcut" hides what exactly pathFor and params actually do.