I am building a dynamic route base on user click, the navigationmodal is rebuilt after the user click a button, which determines the route to navigate the user to. How do I make durandal route relative when using the navigate in a view model. When I use the router.navigationmodel all the routes are configure as a relative to the current route, which is working fine. But when I try to use navigate in the viewmodel this remove the current route in the address bar and replace it with the string of the route I'm navigating to.
For example:
using navigationmodel
route -> 'car' the route display -> 'index#car' -> this is fine
but in the viewmodel, calling car with navigate('car') the route becomes -> '/car';
Please I will greatly appreciate it if someone can help with a solution.
Related
Hi I am trying to push a page but it appears any push to a page I'm currently on doesn't reload the page like /about to /about doesn't do anything(which is fine). If I push a page that is different than the one I'm on it will direct me to the page and reload(expected). The problem is I am using a param in the url that affects what is shown like /profile/jordan1 and when I push /profile/jordan2 because its the same base route and only parameter change it does show /profile/jordan2 in the URL but does not actually reload the page so the page doesn't repopulate with jordan2 data and stays unchanged so I can reload the browser myself and it will work but I want the button click to do that like it should do
Im using Vuetify and have tried just using :to in the button component as well as #click and creating a method with
:to="'/profile/' + this.$store.state.userAuthData.username"
this.$router.push({ name: 'Profile', params: { username: this.$store.state.userAuthData.username } })
both work Identical and have same issue.(the :to one I'm actually using a computed property with that route but for simplicity just wrote it like this)
I am trying to get 3 different routing "styles" in my application. I need to identify these in each view-model's activate method:
User clicks a button or link in my app that causes my app to call this.router.navigate()
This one is easy because I always put a parameter into the URL, so in the target View-Model, I have that param in my activate method.
The users presses the back or forward buttons or loads the application for the first time.
I can also get this by using the this.router.isExplicitNavigation variable or checking if my state is uninitalized.
The user clicks on one of the views displayed in the nav-bar (setup in the app.ts configureRouter method).
Unfortunately I cannot find a way to distinguish this one from when the user presses the back and forward buttons on the browser.
So here is my question, is there a way to know when a view-model's activate method has been called because a user selected a nav-bar route?
If I understand your question correctly, you want distinguish between 1. and 3. In activate(), you receive all routing parameters (as the method's first argument), both:
from the route-template, such as /myRoute/:myparam
from the query string
So I'd suggest to put a query parameter for the menu bar, which parameter you can read in activate(). For example:
let's say your route /myRoute
from the button, simply navigate to /myRoute
from the navbar, navigate to /myRoute?from=navbar
You might know this, but you have multiple options to navigate from code:
router.navigate('compose your route manually')
router.navigateToRoute('route's name', parameters)
in template, using <a route-href="route: 'myRoute'; params.bind={...}" >
Your code:
//button
router.navigateToRoute('my-route');
//navbar
router.navigateToRoute('my-route', {from: 'navbar'});
//destination view-model
activate(params: Object): void {
if (params.from === 'navbar')
//routed from the navbar
else
//routed from a button
}
In my scenaria, I wanna passed 'token' to home view from login view through navigator and it works.
Unfortunately, when I exit login and navigate to login view, the params which once be passed to root navigator cannot be cleared or replaced.I had tried resetTo, but it not works.
So if I switch user, the token will not be changed in root navigator.
Of course, if I use push or initialize a new navigator, it will change 'token'.but I don't wanna do that. because, first, I'm not sure if I initialize a navigator, whether the old one was destroyed, if not ,it will waste memory, in my opinion.second, I don't wanna do extra useless works(if params can be changed in root navigator,the child can retrieve params from it without pass again)
so anyone could resolve it ? thanks in advance
Resolved by myself
Not directly, but use build-in solution from navigator.
In initialRoute, I passed token to it , and in renderScene taken route.token for specified component.
After I logout from index page to login page, I passed token to push method , and then the token which in Navigator tag was changed, and certainly it was passed to Index page.
So my new value is passed successfully,hope helps somebody~
I'm using the Router in Durandaljs to control routing in a SPA. In my application all routes are created dynamically. Therefore I use only mapUnknownRoutes for mapping all routes. The problem I have is that if the user navigates between different hashes in the same page, clicking on 'back' leads to unloading the current page - something I wish to prevent. I thought of doing this by using guardRoute and there return 'false' when navigation remains in the same page, but 'guardRoute' runs only after 'mapUnknownRoutes' hence does not prevent the unloading of the current page.
Any suggestions?
Thanks !
Elior
I am developing an mvc4 app with multiple spa's.
I am using the hot towel template for my spa.
What I want to do is have a anchor link within my views for a spa go to the index action for another controller, so my users can exit one spa and open another. Not all actions will start a spa some are regular mvc style pages.
I have put code like like the following in my spa html pages:
Navigate to another controller
This will change the url in the browser but always reloads the default html page for the spa. If I hit the refresh button in the browser then if will go to the proper page.
I have been able to put a target on the anchor tag of _parent or _top like:
Navigate to another controller
and it will navigate to the new controller page.
I believe it is something in the durandal framework that is preventing the spa from navigating to the second controller, but since I am just starting to work with this, I am stumped as what I need to change. I think there should be a better way than using the target in the anchor tag, or is that the best option.
I hope that I have understood you correctly. I believe this behaviour is caused my Sammy.js (which the durandal router is currently based on). The default behaviour of Sammy is to hijack all links and process them as regards to the SPA itself.
I didn't like this behaviour for the website I am working on and needed links to other MVC web pages to be possible from within the SPA. What I really wanted is for regular links to just work and hash links to be interpreted as a link to another view within the SPA. So '/controller/action' would go to another web page and '#moduleId' would go to another durandal V/VM.
I found this Sammy option that works for me and set it in my main.js
// This stops Sammy from hijacking regular links
Sammy.Application.prototype.disable_push_state = true;