I have 2 routes with vue-router, one of them receives a parameter id.
{
path: '/sale/',
name: 'other',
component: ComponentA,
},
{
path: '/sale/option/:id',
name: 'close-sale',
component: ComponentB,
},
it turns out that the redirection is done with code directly, making in ComponentA
this.$router.push({ name: 'close-sale', params: {id: this.id}})
When I do this, it redirects me to the path named close-sale, but inside the path I get the id to load some data of the following form
data(){
return {
id: this.$route.params.id
....
}
},
mounted (){
axios.get('...'+this.id). // undefinied this.id
},
But I always return undenifed for the value of id.
How could I get this id if in the url it is not shown? I hope I have understood
Related
I want to route with an Id between the pages. I do so with [routerLink]. But when I run the app I get an error: Error: Cannot find module '../friend/friend-details.module'. I suppose that I didn't type in correctly the path but I wouldn't know what I could try further. So I want to navigate to friend-details and pass on the id so it know which item it was. The friend-details folder is in the friend folder, so the path should actually work.
page.html
<ion-card *ngFor="let friend of loadedFriends">
<ion-avatar [routerLink]="['/', 'tabs', 'friend', friend.id]" slot="start">
</ion-card>
tabs.router.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage, //render component that holds your tabs
children: [
{
path: 'friend',
children: [
{
path: '',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
},
EDIT:
I tried a solution in which I used a click event:
openFriendDetails() {
this.router.navigate(['friend/:id']);
}
which I take access from app-routing.module.ts
{ path: 'friend/:id', loadChildren: './friend-details/friend-details.module#FriendDetailsPageModule' },
The navigation works after this change. But somehow I can't make use of my id since the friend-details page is frozen somehow and I can't change my page anymore.
first you need to change your children to this
children: [
{
path: '',
pathMatch: 'full',
loadChildren: '../friend/friend.module#FriendPageModule'
},
{
path: ':friendId',
loadChildren: '../friend/friend-details.module#FriendDetailsPageModule' //maybe delete the same page of app.module.ts
},
]
then also you need to add path: '', component: yourcomponent in your FriendDetailsPageModule routing
check your friend-details module path and put id as second router link param. for example : [routerLink]="['/tabs/friend', friend.id]" this will generate the route /tabs/friend/:friendId and you can access by ActivatedRoute.params.friendId into your component
You mention that:
The friend-details folder is in the friend folder, so the path should actually work.
Are you being accurate with your words? If so the path should be:
../friend/friend-details/friend-details.module#FriendDetailsPageModule
My routes for the application are
const router = new VueRouter({
mode:'history',
routes:[
{
path:'/home',
name:'home',
component: Home
},
{
path: '/services',
name: 'services',
component: Services
},
{
path:'/blogs',
name:'blogs',
component:Blogs
},
{
path:'/pingme',
name:'pingme',
component:Pingme
}
],
})
Now, in services route I want to navigate to the which is present in the Home component. How can I create router so as to navigate to the services div when the services link is clicked?
Let's say you want to bring in focus to a specific div in the Service component.
we will make use of query params to achive this. You add add a dedicated url as well which will do this.
This is my route:
{
path: '/services',
name: 'services',
component: Services
}
Then in the url localhost:8000/services?show=mydiv and in the mounted hook of the component do something like this:
mounted() {
// add a id to the div we want to bring in foucs
// and id and the id is paased the query params
document.getElementById(this.$route.query.show).scrollIntoView()
}
Let me know if it works for you.
Edit
Another way we can make this work is by using a watcher and a computed property.
First add a computed property for the show query param in the route.
computed: {
show() { return this.$router.query.show }
}
Then add a watcher to trigger the focus.
watch: {
show: {
immediate: true,
handler(value) {
document.getElementById(value).scrollIntoView();
}
}
That should work in all cases.
I have one problem in developing Angular project.
I tried to find the solution on how to implement the route relative redirects with
When the URL redirects, in which origin redirect has its relative the query params and the fragment.
For example, in the guide of Angular.io.
const heroesRoutes: Routes = [
{ path: 'heroes', redirectTo: '/superheroes' },
{ path: 'hero/:id', redirectTo: '/superhero/:id' },
{ path: 'superheroes', component: HeroListComponent },
{ path: 'superhero/:id', component: HeroDetailComponent }
];
in hero-detail, goback() function to navigate back to the HeroListComponent.
I added relativeTo: this.route. But it is not working.
gotoHeroes(hero: Hero) {
let heroId = hero ? hero.id : null;
// Pass along the hero id if available
// so that the HeroList component can select that hero.
// Include a junk 'foo' property for fun.
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }], {relativeTo: this.route});
}
When configuring to redirect to superheroes, I don't know how to implement this feature.
You need a relative route, so depending on where you are, this should work to go back:
this.router.navigate(['../', { id: heroId, foo: 'foo' }, {relativeTo: this.route}]);
You can use something like -
this.router.navigate(
['hero','12345'],
{
relativeTo: this.route,
queryParams: {
type: 'value',
},
}
);
I have the following route hierarchy :
const appRoutes:Routes = [
{
path: 'article',
component: ArticleComponent,
children: [
{
path: '',
component: ArticleListComponent
},
{
path: ':articleId',
component: ArticleDetailComponent,
children: [
{
path: '',
component: PageListComponent
},
{
path: ':pageId',
component: PageComponent
}]
}]
},
{path: '**', component: DefaultComponent},
];
When I click the Article link , the page is navigated to :
"https://run.plnkr.co/article;listData=foo"
And then I see this :
Now , When I click at Article 2 , the page is navigated to
"https://run.plnkr.co/article;listData=foo/2;detailData=bar"
And then I see this :
Now , when I click at the Page 33 link , the page is navigated to :
"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro"
And then I see this:
OK
As you can see , at the innermost component ( the single page component) , I set some code to see the current params :
Page component! {{params | json}}
Which is populated in :
export class PageComponent {
constructor(private activatedRoute_:ActivatedRoute) {
activatedRoute_.params
.subscribe(params => {
this.params=params;
});
}
Question:
Currently the value of params value - is only { "pageId": "33", "detailData": "kro" } which belongs to the final route.
But how can I get the previous routes values ?
I know I can read the querystring but I find it an unconventional way .
The innermost url is :
"https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro"
So basically I'm asking how can I extract all the parameters from prev routes.
( I mean what are the values for articleId , listData , detailsData (the first one) )?
PLNKR
You can get all parents params using snapshot. In detail component:
let node = activatedRoute_.snapshot;
while(node) {
console.log('component', node.component.name, ', params:', node.params);
node = node.parent;
}
component ArticleDetailComponent ,
params: Object {articleId: "1", detailData: "bar"}
component ArticleComponent , params: Object {listData: "foo"}
component RootComponent , params: Object {}
You should be sending the listData value along with the object.Modify this to your app/article-list.component.ts Component
<a [routerLink]="[articleId, {listData:'foo',detailData: 'bar'}]">
LIVE DEMO
You can manually send params when calling the states inside the links, but to be honest this is not the best solution.
My better suggestion is to use the resolve blocks of the states and implement resolvers in order to achieve that.
Every state will have the corresponding resolver which will resolve the params you need from the previous state.
Here the link to the documentation:
https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
The concept is that inside the resolve of the i state, you can still access the state parameters of the i-1 state, so you can pass them to the new state.
I have a dynamic iron route with the template explicitly set, however iron router attempts to render the path instead of the template.
http://localhost:3000/blog/example-post
Couldn't find a template named "Blog:permalink" or "blog:permalink". Are you sure you defined it?
Router.route('/blog/:permalink'), {
template: 'blogPost',
name: 'blogPost',
path: '/blog/:permalink',
data: function () {
return Blogs.findOne({ permalink: this.params.permalink, published: true });
}
}
Router.route('blog'), {
path: '/blog',
waitOn: function () {
return [
Meteor.subscribe('blogs')
]
}
}
You closed route ) without adding there the options object ( see , after ) ). That's why iron:router tries to generate template name from path:
Router.route('/blog/:permalink'), {
Should be:
Router.route('/blog/:permalink', {
template: 'blogPost',
name: 'blogPost',
path: '/blog/:permalink',
data: function () {
return Blogs.findOne({ permalink: this.params.permalink, published: true });
}
})