Hi,
I’m trying to use this code: router.navigate('/about/', { transition: 'f7-cover' });
But I’m getting this error: ReferenceError: Can’t find variable: router
why is that and how can I solve this issue?
This is my routes.js code:
var routes = [
{
path: '/',
url: './index.html',
},
{
path: '/about/',
url: './pages/about.html',
},
{
path: '/profile/',
url: './pages/profile.html',
},
{
path: '/notifications/',
url: './pages/notifications.html',
},
{
path: '/notification/',
url: './pages/notification.html',
},
{
path: '/form/',
url: './pages/form.html',
},
{
path: '/catalog/',
componentUrl: './pages/catalog.html',
},
{
path: '/product/:id/',
componentUrl: './pages/product.html',
},
{
path: '/settings/',
url: './pages/settings.html',
},
{
path: '/dynamic-route/blog/:blogId/post/:postId/',
componentUrl: './pages/dynamic-route.html',
},
{
path: '/request-and-load/user/:userId/',
async: function ({ router, to, resolve }) {
// App instance
var app = router.app;
// Show Preloader
app.preloader.show();
// User ID from request
var userId = to.params.userId;
// Simulate Ajax Request
setTimeout(function () {
// We got user data from request
var user = {
firstName: 'Vladimir',
lastName: 'Kharlampidi',
about: 'Hello, i am creator of Framework7! Hope you like it!',
links: [
{
title: 'Framework7 Website',
url: 'http://framework7.io',
},
{
title: 'Framework7 Forum',
url: 'http://forum.framework7.io',
},
]
};
// Hide Preloader
app.preloader.hide();
// Resolve route to load page
resolve(
{
componentUrl: './pages/request-and-load.html',
},
{
props: {
user: user,
}
}
);
}, 1000);
},
},
// Default route (404 page). MUST BE THE LAST
{
path: '(.*)',
url: './pages/404.html',
},
];
and this is how I call the transition to another page:
var $$ = Dom7;
var app = new Framework7({
on: {
init() {
if(localStorage.getItem('firstname') != null){
var firstName = localStorage.getItem('firstname');
$('.name').text(firstName);
}
},
},
name: 'My App', // App name
theme: 'md', // Automatic theme detection
el: '#app', // App root element
// App store
store: store,
// App routes
routes: routes,
});
$(document).on('click', '.button', function () {
router.navigate('/about/', { transition: 'f7-cover' });
});