While the direct mapping of route parameters to activate() parameters is convenient, it poses a problem for me for the reuse of parametrized modules.
Take a route like e.g.
{ route: '/user/:id/request(/:requestId)', moduleId: 'requestDetail', title: 'Request Details' }
The viewmodel will be called with
activate(id,requestId)
Now, the requestDetail module could be reused at different positions and levels in navigation, like so
parent router
{ route: '/company/:companyId*users', moduleId: 'someModule', title: 'Request Details' }
child router
{ route: '/user/:id/request(/:requestId)', moduleId: 'requestDetail', title: 'Request Details' }
which has the effect of the requestDetail vm being called with
activate(companyId,id,requestId)
which obviously is a problem.
Is there any way to restrict the passed parameters to those coming from the child router (which would solve the problem)?
Related
I am using Vue JS 3 and Vue Router. I have a company area of the app that uses a dynamic companyId parameter in the route. Ex. myapp.com/46/tasks where 46 is the companyId. Everything works fine when I navigate around to the different sub areas of the company area. However, if I am displaying a router link on any page, and that router link depends on the companyId parameter, if I try to navigate anywhere outside of the company area, which does not require the companyId, the reactivity of the router-link throws an error and the navigation does not happen. If I'm located at the route referenced above, and I try to navigate to
<router-link v-if="session.availableAccounts.length > 1" :to="{name: 'selectCompany'}">
{{ session.selectedAccount.name }}
</router-link>
Here is the router-link that throws the error: (however this happens on any page, with any router-link that requires parameters from the existing page and I then try to navigate somewhere without passing in the parameters EVEN THOUGH THE PARAMETER IS NOT NEEDED FOR THE ROUTE I AM TRYING TO GO TO)
<router-link
:to="{
name:'users',
query: {
selected: person.id,
area: 'Info'
}
}">
{{ person.name }}
</router-link>
Here is the portion of my router.js file concerning the 2 routes I am trying to move between.
{
path: '/account',
component: Base,
meta: {
authorization: true
},
children: [
{
name: 'newAccount',
path: 'new',
component: NewAccount,
meta: {
authorization: true,
title: 'New Account'
}
},
{
name: 'selectCompany',
path: 'selectAccount',
component: SelectCompany,
meta: {
authorization: true,
title: 'Select Account'
}
},
{
name: 'createCustomer',
path: 'create',
component: NewCustomerAccount,
meta: {
authorization: true,
title: 'Create Account'
}
}
]
},
{
path: '/:companyId',
component: Base,
meta: {
authorization: true,
nav: 'account'
},
children: [
{
name: 'home',
path: 'tasks',
alias: '',
component: TaskManager,
meta: {
title: 'My Tasks'
},
},
...
]
}
This happens no matter what method I use to cause navigating, whether I use a router-link or whether I call router.push() in code. However the error always comes from a router-link. If I hide all router-links on the page the navigation works flawlessly. I tried to recreate this on a smaller scale app and I can't seem to make it happen, which means I am doing something wrong but I can't figure it out. I also can't find any similar issues here, which is typically a good indicator that I'm doing something wrong. There is definitely a work-around, where I can store that companyId in a Vuex store and pass it around in the route, but why should I have to pass in a parameter that is not actually in the route?! I really don't want to go down that route (pun intended) unless I absolutely have to. And I first ran into this problem with a child route of the company which needs a projectId parameter. I had the same issue when navigating away from /[:companyId]/[:projectId]/anywhere to /[:companyId]/anywhere IF and only if there is a router-link displayed on the page that relies on [:projectId], and in that situation I was actually relying on whether or not projectId existed within the route params to control a navigation menu. I developed a work around for that behavior but otherwise passing the projectId into the router push to keep the error from happening would have stopped my nav menu from updating correctly.
Is the problem that I do not explicitly define the dynamic route in the parameter? It seems like explicitly defining it would solve my problem but it also requires me to store that somewhere, effectively duplicating the data. I would rather have the id defined in one place (the route) rather than storing it in the store and the route and having to worry about keeping them in sync with each other. Is there no other way?
Any help is appreciated. Thanks.
As is normally the case when I ask a question I discover the answer while asking it. Just posting in case anyone else runs into this same issue. The solution is just to make sure that you explicitly provide the dynamic param when you declare the router-link. Not sure if I like that it lets you create the link without a warning that the required param has not been declared (while there is a warning if vue-router can't resolve the route).
My revised router-link:
<router-link
:to="{
name:'users',
params: {
companyId: route.params.companyId
},
query: {
selected: person.id,
area: 'Info'
}
}">
{{ person.name }}
</router-link>
Good morning, I have my route setup as shown below within Aurelia CLI.
config.map([
{
route: [''],
viewPorts: {
'side': { moduleId: 'side' },
'main': { moduleId: 'main' }
},
title: 'Test',
nav: false,
name: 'Temp'
]);
What I would like to do is based on what I select on my side view, I just want to change the moduleId for main and load that view.
I don't think there's a way to dynamically change the moduleId of a view-port. I see 2 options to solve your proble:
1 - Create another route, changing the moduleId of one of the viewports
2 - Use the layout mechanism and change its content in run time. I recommend you to read http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/10.
I know this is not the answer you were expecting but I hope it helps.
This question is a follow-up question for my original question Linking directly to both parent+child views/controllers from the main navigation menu
The accepted answer is great, but later when I added a 2nd "childRoute" dynamically, I noticed a problem. In order to build my navigation dynamically I had to add the multiple routes with the same "route" attribute. (see app.js in the example code below). The only difference were the "title" and "settings" attributes.
configureRouter(config, router){
config.title = 'Aurelia';
config.map([
{ route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-a' }, nav: true, title: 'Shared Parent - child-a' },
{ route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-b' }, nav: true, title: 'Shared Parent - child-b' },
...
]);
this.router = router;
}
The settings attribute I used in the view for doing this:
<a if.bind="row.settings.childRoute" href.bind="row.href + '/' + row.settings.childRoute">${row.title}</a>
I know it's not pretty but it does navigate to the right child route. The problem is that it's always the last of the 2 routes with duplicate "route" attributes that is marked as active.
The reason why I added the settings: {childRoute: 'child-a/b' } instead of giving them distinct "route" attributes like route: 'shared-parent/child-a' and route: 'shared-parent/child-b' was that the url would actually then match shared-parent/child-a/child-a and shared-parent/child-b/child-b since we're first linking to the shared-parent.
This live runnable gist should clearly display the problem (child-a route never activating): https://gist.run/?id=95469a9cb3a762d79da31e0b64248036
Ps.
If you have a better idea of what to call the title of this question please feel free to edit it.
So I took a stab at your problem using the EventAggregator in the Activate lifecycle hook in the child view models.
https://gist.run/?id=bfb5df5e39ac0bb73e9e1cae2d2496e2
in the child view models, I just published an event stating the child route was updated:
activate(params, routeConfig, navigationInstruction) {
let payload = navigationInstruction.parentInstruction.config.title;
payload = payload.substring(0, payload.length - 7);
this.aggregator.publish("child route updated", payload + "child-a");
}
In the app.js file, I updated the route titles, and added an activeChild property. Next, update the activeChild property when the event is captured:
constructor(aggregator) {
this.aggregator = aggregator;
this.aggregator.subscribe("child route updated", payload => {
this.activeChildRoute = payload;
console.log(this.activeChildRoute);
});
}
Finally, I updated the class expression on you list item to update based on that active child Flag:
<li repeat.for="row of router.navigation"
class="${row.title === activeChildRoute ? 'active' : ''}">
I want to have a list of courses on the screen(contrived example). When you click a course, it expands(still showing the list of courses) into a list of students that take the course. When I click a student it must expand into a view of the students details(still showing the list of students AND the list of courses). etc.
So basically I want to have nested routers, I think?
Example, app.js
config.map([
{route: "", moduleId: 'no-selection', title: 'Select'},
{route: "course/:course-id", moduleId: 'course', name: 'course'}
]);
course.js(inject the router):
this.router.configure(config => {
config.map([
{route: "course/:course-id/student/:student-id", name: "student", moduleId: "student"}
]);
})
student.html has its own router-view element
The above works, BUT when i click a top level link(a course), the content gets put in the inner router-view. Even worse, there is now a router-view in every student that gets expanded, how do I manage this?
Basically I can't find any documentation on how to do this - the child router stuff doesn't seem to be exactly what I need? Any help will be appreciated.
Let's look at this and how we can implement this with a single router. Here is the route structure I might use.
[
{ route: "", moduleId: 'no-selection', title: 'Select'},
{ route: "course/:courseId/:studentId?", moduleId: 'course', name: 'course'}
]);
The studentId parameter is optional.
Then I would look at how to use this course page to do everything you want based solely on the parameters it receives in the activate callback.
I don't have time to give a full answer right now, but hopefully this will help lead you down the right path!
I'm trying to navigate from one child route to another, but I continually get Route not found. My primary question: how to navigate between child views?
Below is the code, and I'll have additional questions below, too.
App Mode-View
App Class:
export class App {
configureRouter(config, router) {
config.title = 'My Site';
config.map([
{ route: ['','job-view'], name: 'jobView', moduleId: './job-view', nav: true, title:'Jobs'},
{ route: ['services'], name: 'services', moduleId: './services', nav: true, title:'Services'}
]);
this.router = router;
this.router.refreshNavigation();
}
}
Q.2: Why do we need to save router here if it's always accessible from aurelia-router?
App Page:
<template>
<require from='./nav-bar'></require>
<nav-bar router.bind="router"></nav-bar>
<div class="container">
<router-view></router-view>
</div>
</template>
Ok, so now that we have our root page view and nav defined, let's define the job-view MV.
JobView Class:
export class JobView {
configureRouter(config, router) {
config.map([
{ route: ['','jobs'], name: 'jobs', moduleId: './jobs', nav: false, title:'Jobs', settings:{icon:'glyphicon glyphicon-align-justify'} },
{ route: ['job/:id'], name: 'job', moduleId: './job', nav: false, title:'Job Details'}
]);
this.router = router; //WHY SAVE THIS?
this.router.refreshNavigation();
}
}
JobView Page:
<template>
<router-view></router-view>
</template>
Now, here are the child views. My assumption that is that routing that occurs should be relative to job-view. That's what I want, ideally.
Jobs Class (a bunch of code removed for brevity):
import {Router} from 'aurelia-router';
#inject(Router)
export class Jobs {
constructor(router) {
this.router = router;
}
toJob(id) {
// this.router.navigateToRoute("job", {id:id}); // ERROR - ROUTE NOT FOUND
this.router.navigate("#/job-view/job/".concat(id)); // THIS WORKS
}
}
Q.3: I've seen both router.navigateToRoute and router.navigate referenced, but no indication when to use either or what the difference is, and the document doesn't seen to explain. Which should be used? Docs
Jobs Page:
Details for jobs.html are irrelevant, so not listing them here.
Finally, the job view:
Job Class:
Nothing relevant for job.js, so not listing code. At most I may perform navigation back to jobs, but that's handled below in the page.
Job Page:
<!-- a bunch of html //-->
<!-- HOW TO USE ROUTER IN HTML, NOT BELOW URL HREF? //-->
Print Jobs
<!-- a bunch of html //-->
Q.4: Again, I'd like routing to relative, even in the HTML page. The above won't work, so what should I use?
There was a proposed answer in a similar question, but injecting job-view into job and using job-view's saved router didn't work either.
By the way, if I manually navigate to http://localhost:3000/#/job-view/job/3 the page loads fine, so it's clear something with the router.
Note to mod:
A similar question was ask at How to access child router in Aurelia? but it wasn't answered with a solution that works.
I will try to answer you questions one by one below.
I will start from Q2
Q.2: Why do we need to save router here if it's always accessible from
aurelia-router?
So in your App Mode-View App Class you are referencing router property in your view: <nav-bar router.bind="router"></nav-bar>, that's why you need to declare the property to use it then. In the second view you are not so you don't need it :-)
The property router is also added when you need do something with the router in main.ts / main.js - the starting point of you application. This is because the router is configured for the first time there, and injection will not work in constructor, so you need to save this property to get it in configureRouter(..) method (note: this was a case before beta 1, I don't know if it's still there now).
In your code you have a call for this.router.refreshNavigation(); this will ensure that your router is updated with new information regarding current location of the routing.
Q.3: I've seen both router.navigateToRoute and router.navigate referenced, but no indication when to use either or what the difference is, and the document doesn't seen to explain. Which should be used? Docs
The method router.navigate(fragment: string, options?: any) uses an URL fragment not a route name to navigate, so e.g. router.navigate('#/app/child', {...<options - not params od the URL>...}). This method must be used to navigate absolutely between routers, and to access parent URL etc.
If you only are navigating around the current router you will always use router.navigateToRoute(route: string, params?: any, options?: any). This method is using a route name, not URL, co we just put there a name of route in the custom routing map (custom means the current child routing map, or current main routing regarding the URL location we are on the page). Here you can pass URL params in more convenient way, as you can see. You can use a params object instead of concatenating the URL with params.
Q.4: Again, I'd like routing to relative, even in the HTML page. The above won't work, so what should I use?
In Aurelia we are not using href attribute of the a tag directly for navigation. As already answered by Brandon, you have to use route-href attribute, which is probably nowhere documented just appears around on forums and portals. This is equivalent of the router.navigateToRoute(route: string, params?: any, options?: any), so you cannot use it to navigate between routers in such case you can use custom attribute or just use click.triger="navTo('#/app/child')", where the navTo() method is implemented in your View-Model and looks like this:
public navTo(routeName: string) {
// Assuming you are injecting router somewhere in the constructor
this.router.navigateToRoute(routeName);
}
And finally your topic question:
Q.1: How navigate between child routes
Probably now you know the answer, just use: router.navigate(fragment: string, options?: any) with absolute URL.
Below example custom attribute to solve this:
import {inject} from "aurelia-dependency-injection";
import {Router} from "aurelia-router";
import {customAttribute} from "aurelia-framework";
#customAttribute('nav-href')
#inject(Element, Router)
export class NavHref {
private value: string = '';
constructor(private element: Element, private router: Router) {
let $this = this;
element.addEventListener('click', () => {
if ($this.value === 'back') {
$this.router.navigateBack();
} else {
// expression
$this.router.navigate($this.value);
}
});
}
public valueChanged(newValue: string, oldValue: string) {
this.value = newValue;
}
}
First you need to import it in your HTML, I named my file nav.href.ts:
<require from="common/nav.href"></require>
Then just use it in you HTML code:
<a nav-href="#/home/any-location">My link to any location</a>
Hope this will help you, cheers :-)
The way I've configured child routers in my Aurelia apps is in this fashion:
app.js
export class App {
configureRouter(config, router) {
config.map([
{ route: ['','home'], name: 'home', moduleId: 'home', nav: true },
{ route: 'work', name: 'work', moduleId: 'work/work-section', nav: true },
]);
this.router = router;
}
}
work/work-section.js
export class WorkSection {
configureRouter(config, router) {
config.map([
{ route: '', moduleId: './work-list', nav: false },
{ route: ':slug', name: 'workDetail', moduleId: './work-detail', nav: false }
]);
this.router = router;
};
}
The corresponding "work-section.html" is simply a Router View:
<template>
<router-view></router-view>
</template>
In this use case, I have my main app.js which defines a child router, "work", which sits in a subdirectory under src.
When the route /work is activated, the child router, "work-section" takes over, activating the "work-list" route, as the path segments end there: /work
"work-list.js" retrieves items from a REST API then passes the data to the view.
From there, I'm able to use route binding to get to a "work detail" in the "work-list.html" view:
<div repeat.for="sample of item.samples">
<a route-href="route: workDetail; params.bind: { slug: sample.slug }">
${sample.title}
</a>
</div>
Hope that helps you out. I'm not 100% certain if you're asking how to do a redirect, or how to nav to a child route from the view, so please correct me if I'm wrong and I'll do my best to update my answer for you.