It also seems the routes only work when you assign them to links on the index page. Trying to use them in page flows do not work.
Bump, this is expected?
Doesn’t occur with Framework7.
You could have a /
instead of #!/
on the client, the only problem is that when you refresh the page you will get a 404 error when there is no server-side rewrites. The #!
always works and doesn’t require any server-side rewrites.
Thanks Patrick, so it’s okay the routing http://localhost:63441/index.html#!/dashboard
I’m asking this beacuse I’m running in some issues with this:
if (window.location.pathname === "/index.html") {
console.log("true");
} else {
console.log("false");
It will always return true
because /index.html#!/dashboard
=== /index.html
Any workaround for this?
EDIT: Found out that setting the value of “window.location.href
” navigates to the provided URL but inside a const returns the location.
If you don’t like the hash
routing, you can set it to use path
with the following:
dmx.routing.router = 'path';
Using path for routing can give some issues when page is getting reloaded and when there is no default document. When you go to http://localhost:63441/
it is possible that you get a 404 instead of the index.html
.
When using the hash
router window.location.pathname
will not work. you can use the following code:
const location = dmx.routing.getUrlInfo();
if (location.path === '/') {
console.log('true');
} else {
console.log('false');
}
The object returned from getUrlInfo()
has the following properties: path
, query
and hash
.
Thanks for all your inputs, means a lot for me.
I think this is a bug, right?
Going back doesn’t reload the content page when it comes to going to main
Screen_bs
Another thing (maybe related):
Well, that’s exactly what is happening right now.
- Scenario 1
- Scenario 2
-
Note the last screenshot index.html returns empty.
The warning is because you didn’t have a route defined for /
, which is the root route (index.html).
With mobile app different routing than hash
will not work since you can’t do rewrites.
Thanks Patrick
Sorry but the scenario 2 has a route defined for / and then all stills failing.
Sorry, maybe I’m not understanding it very well
The /
route should not load the ./index.html
, the Url points to the content page and is loaded within the dmx-view component. Loading the index.html will result in an infinite loop of loading itself.
You mean loading ./index.html? Because:
I tried routing the index.html (main page) with Wappler, don’t know why it considers as a content page. Will try manually edit that
Your index.html
is your main page. On that page you use the dmx-view
component that loads partial pages (content pages). The routes point to the pages that will be loaded into the view component. When you have a route to index.html
it will result in an infinite loop. The routes should only point to the partial pages that you want to load in the view component.
It makes sense. But:
So this is wrong (from the docs) ?
Just followed the tutorial.
But I’ll do it again to see it with more details.
Sorry for bother you and thanks again for your time
That’s the documentation about creating Single Page Apps for web apps, not for mobile apps. Routing for mobile apps works differently.
Got it Teodor, I tried the both ways, and both are failing (Opened a bug report)
There’s a way I can set / to a main page in mobile?
My page starts on index.html, if I go to about.html,
I cant go to the main page (even with a content page on it)
Yes! I got that.
But:
- I open my mobile app with the blank screen (index.html)
- Go to about.html
- I cant go back
The reason I need an answer is because I need to close the app if path=main screen=the same as I open the app (index.html)
Don’t want to use browser history, just use the back button to a main page and if not, exit the app.
Well why not create a “home” page as a content page then and load it?
I think that routing / as home still loading index.html
Please check:
it’s explained how to setup a home page route, that loads your content on /
route.
This is not working… I literally started a brand new project from scratch - bootstrap and capacitor, followed instructions in your post, and routing is simply not working. Please expedite fixing this issue as I literally cannot build my app. Thank you