V2 Initial Page Route comes up blank

When setting up the Initial Page Route in my router the page comes up blank. I cannot get the initial page to load my function that is in myApp.on('pageInit',function(){ });. Once i click on my link that goes to the exact same page, it will then run the function.

index.html

<!-- App root element -->
<div id="app">
	<!-- Statusbar overlay -->
	<div class="statusbar"></div>
	<!-- Your main view, should have "view-main" class -->
	<div class="view view-main">

        <!-- Bottom Toolbar-->
		<div class="toolbar toolbar-bottom-md">
			<div class="toolbar-inner">
				<a href="/test/" class="toolbar-margin-right"><i class="f7-icons">add_round</i></a>
			</div>
		</div>
	</div>
</div>

my-app.js

// Initialize your app
var myApp = new Framework7({
    // App root element
    root: '#app',
    // App Name
    name: 'myapp',
    // App id
    id: 'com.cordova.myapp',
    view: {
        pushState: true,
        animate: false,
        //pushStateSeparator: '#',
        // uniqueHistory: true,
        // reloadPages: true
    },
	
    // Add default routes
    routes: [
        {
            path: '/',
            url: './test.html'
        },
	],
  });

// Export selectors engine
var $$ = Dom7;

Then in my index.js onDeviceReady, i check that the user is logged in first and then init my framework7 app.

var mainView = myApp.views.create('.view-main', {
	url: './test.html'
});