Develop Reference

Failed to get the parameter with Vue-Router in VueJs

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

How to implement the route relative redirects with the query params and the fragment

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',
},
}
);

How can I change data object in Vue component depending on route and using vue-route?

I faced issue while working on vuejs application:
I have to change titles in few vuejs components, depending on routes
routes: [
{
path: '/',
components: { //with default data
FirstScreen,
Advantages,
Slider,
},
},
{
path: '/moscow',
components: { //with special data for Moscow
FirstScreen,
Advantages,
Slider,
},
},
{
path: '/berlin',
components: { //with special data for Berlin
FirstScreen,
Advantages,
Slider,
},
},
],
and data at all .vue files looks like this
data() {
return {
defaultTitle: 'some string',
defaultArray: ['defaultFirst', 'defaultSec'],
};
},
And I have about 100 cities... how can I solve this issue?

Assuming you use vue-router you can 'hook into' one of it's extremely helpful methods called beforeEach. This methods acts as a sort of middleware and runs before any given route is executed.
router.beforeEach((to, from, next) => {
document.title = to.meta.title
next();
});

If someone will need to implement data transfer depending on routes and really want to hardcode it to route file it is possible with this: https://github.com/vuejs/vue-router/blob/dev/docs/en/essentials/passing-props.md
In my case it will be looks like:
routes: [
{
path: '/',
components: {
FirstScreen,
Advantages,
BigSlider,
},
props: {
FirstScreen: {
title: 'title',
subtitle: ['arr1', 'arr2'],
},
Advantages: {
title: 'title',
advantages: 'advantages',
},
BigSlider: {
title: 'title',
slideText: 'slideText',
},
},
},
and in component you have to do something like this
export default {
props: {
title: {
type: String,
},
subtitle: {
type: Array,
},
},
It will work fine, but I agree with Kevin Karsopawiro in part that this approach is unmaintainable. So using city-component for fetching data from back-end is best in my case.

router navigation: Outlet is not activated

I'm trying to update my app to use the new v3 router than the angular team just announced http://angularjs.blogspot.com.au/2016/06/improvements-coming-for-routing-in.html and I'm having issues navigating between pages in my app, here are my routes
{ path: '/list', component: UserListComponent, index: true},
{ path: '/payrates', component: AdjustPayrateComponent },
{ path: '/assign', component: AssignUserComponent },
{ path: '/edit/:userId', component: EditUserComponent },
{
path: '/documents',
component: DocumentComponent,
children: [
{ path: '/', component: DocumentComponent, index: true },
{ path: '/:id', component: DocumentComponent },
{ path: '/upload', component: DocumentUploadComponent }
]
},
I want to navigate from the /list page to the /documents/:id page to view documents from a user on the list page.
viewDocuments(user: UserList) {
this.router.navigate(['/documents', { id: user.UserId }], { relativeTo: this.route });
}
However I'm getting the error 'Outlet is not activated' and not sure what this means. I'm basing my app off the example at http://plnkr.co/edit/ER0tf8fpGHZiuVWB7Q07?p=preview
If anyone has any example or advice on how to do navigation with the new router anything would be appreciated, thanks!

figured out the problem, I had a leftover <router-outlet> directive inside my list page, and I guess when trying to navigate from that page the router was trying to load into that bad outlet.

How to generate url for a route in Ember.js

I am wondering how is possible to generate url for a given route.
My scenario
I have list of calls (db entity) and user can select several calls and share them with other people via email.
After submition of selected calls is created db row with hash and by relation contains selected calls. Now I need generate link which can be sended by e-mail. This link is not the same route as list of call's route.
So the question is: Is it possible to generate url by route and params in Ember.js? Thank you.

You can use Router#generate which delegates to the router.js library.
Ember 2.5 Example
App = Ember.Application.create();
App.Router.map(function() {
this.resource('post', { path: '/posts/:post_id' }, function(){
this.route('edit');
});
});
App.Post = Ember.Object.extend();
App.IndexRoute = Ember.Route.extend({
model: function() {
return [
App.Post.create({
id: 5,
title: 'I am post 5'
}),
App.Post.create({
id: 6,
title: 'I am post 6'
}),
App.Post.create({
id: 7,
title: 'I am post 7'
})];
},
actions: {
showUrl: function(post) {
alert(this.router.generate('post.edit', post));
}
}
});
Ember 1.3 Example
App = Ember.Application.create();
App.Router.map(function() {
this.resource('post', { path: '/posts/:post_id' }, function(){
this.route('edit');
});
});
App.Post = Ember.Object.extend();
App.IndexRoute = Ember.Route.extend({
model: function() {
return [
App.Post.create({
id: 5,
title: 'I am post 5'
}),
App.Post.create({
id: 6,
title: 'I am post 6'
}),
App.Post.create({
id: 7,
title: 'I am post 7'
})];
},
actions: {
showUrl: function(post) {
alert(this.router.generate('post.edit', post));
}
}
});
This is what the {{#link-to ...}} helper uses under the hood.

This can be done in any Ember.js class with the RouterService. It is available since Ember.js 2.15 and in 3.x. Routing functions are no longer confined to Routes.
Ember 2.15, 3.x Example
import Component from '#ember/component';
import { inject as service } from '#ember/service';
export default Component.extend({
router: service(),
actions: {
showUrl(post) {
alert(this.get('router').urlFor('post.edit', post));
}
}
});