Pages Routes not working correctly

Questions
1

Hello,
I’m really sorry to create another topic but I really need to understand the Routes for correct menu navigation because I really love this framework7 and special thanks to Vladimir Kharlampidi for create this beautiful and simple framework .

My problem here is when I click on page link it’s working not correctly, just one link work correctly(‘searchcarrier.html’).

Thanks for help!

Here is my code:
<----- JS File -->
var $$ = Dom7;

var app = new Framework7({

root: "#app",
name: "Track My Parcel",
id: "com.hubeidev.trackmyparcel",

routes: [
{
	path: 'aboutus',
	url: './template/aboutus.html',
},
{
	path: '/searchcarrier/',
	url: './template/searchcarrier.html',
},
{
	path: 'givefeedback',
	url: './template/givefeedback.html',
},
{
	path: 'contactus',
	url: './template/contactus.html',
},
{
	path: '/',
	url: 'index.html',
}
],

});

var mainView = app.views.create(’.view-main’);

var leftPanel = app.panel.create({
el: ‘.panel-left’,
});

$$(’.mainMenu’).click(function(){
leftPanel.close(true);
});

<— HTML File ----->

<div class="list links-list">
                        <ul>
                            <li class="mainMenu">
                                <a href="/index/">Home</a>
                            </li>
                            <li class="mainMenu">
                                <a href="/searchcarrier/">Carrier List</a>
                            </li>
                            <li class="mainMenu">
                                <a href="/aboutus/">About Us</a>
                            </li>
                            <li class="mainMenu">
                                <a href="/givefeedback/">Give a feedback</a>
                            </li>
                            <li class="mainMenu">
                                <a href="/contactus/">Contact us</a>
                            </li>
                        </ul>
                    </div>

Thanks again!
Shahzad

2

I hope this helps you, here is my working logic for the routes:

1)At the bottom of the index.html I added this:

    <!-- App routes -->
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/routes.js"></script>

2)in the js/route.js I added this:

routes = [
{
path: ‘/’,
url: ‘./index.html’,
},
{
path: ‘/createreport/’,
url: ‘./pages/createreport.html’,
},
{
path: ‘/viewreports/’,
url: ‘./pages/viewreports.html’,
},
{
path: ‘/select/’,
url: ‘./pages/select.html’,
},
{
path: ‘/register/’,
url: ‘./pages/register.html’,
},
{
path: ‘/contact/’,
url: ‘./pages/contact.html’,
},
// Default route (404 page). MUST BE THE LAST
{
path: ‘(.*)’,
url: ‘./pages/404.html’,
},
];

3)I have organized my pages as:

www/pages/createreport.html
www/pages/viewreports.html
www/pages/select.html

and so on…

4)in app.js I have this:

var $$ = Dom7;
var app = new Framework7({
root: ‘#app’, // App root element
id: ‘com.website’, // App bundle ID
name: ‘AppName’, // App name
theme: ‘auto’,

routes: routes,

on: {
// each object key means same name event handler
pageInit: function (page) {},
popupOpen: function (popup) {
// do something on popup open
}
}
});
//Which page to load when the app initialize
var homeView = app.views.create(’#view-login’, {url: ‘/login/’});

5)In each html page I added this code:

//Your forms, login or whatever html code goes there

Hope this helps you troubleshooting your code.

3

You have to specify your paths with the backslashes, like “\path” and use the same in your link.

Example:

routes: [
{
path: '/aboutus/',
url: './template/aboutus.html',
},
...
]

 <a href="/aboutus/">About us</a>

Searchcarrier is already working because you used the backslashes there.