我对Framework7非常陌生。我正在创建一个将出现登录屏幕的应用程序。按下登录按钮后，我将用户名和令牌保存在localstorage中，并导航至仪表板。但是它不起作用。这些值已进入本地存储，但无法重定向到dashbord。同样在应用程序初始化上，我正在检查是否设置了localstorage，如果在那里，则重定向到仪表板，否则将打开登录页面。请帮忙。谢谢。
这是我的index.html
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Color theme for statusbar -->
<meta name="theme-color" content="#2196f3">
<!-- Your app title -->
<title>My App</title>
<!-- Path to Framework7 Library Bundle CSS -->
<link rel="stylesheet" href="css/framework7.bundle.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body class='color-theme-deeporange'>
<!-- App root element -->
<div id="app">
<div class="panel panel-left panel-reveal panel-resizable panel-init">
<div class="block">
<p>Left Panel content here</p>
<p><a class="panel-close" href="#">Close me</a></p>
<p><a class="link logout" href="#">Log Out</a></p>
</div>
</div>
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Bottom Toolbar -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<p class="powered_by_footer">Powered By Framework7</p>
</div>
</div>
<!-- Initial Page, "data-name" contains page name -->
<div data-name="home" class="page no-navbar no-toolbar no-swipeback" >
<!-- Scrollable page content -->
<div class="page-content">
<div class="page login-screen-page">
<div class="page-content login-screen-content">
<div class="login-screen-title">
<div class="center">
<img class='index_page_logo' src='imgs/dish.png' />
</div>
</div>
<form method="post">
<div class="list">
<ul>
<li class="item-content item-input item-input-with-info">
<div class="item-inner">
<div class="item-title item-label">Email/Mobile</div>
<div class="item-input-wrap">
<input type="text" id='username' name="username" placeholder="Your Email / Mobile" required validate>
<span class="input-clear-button"></span>
<div class="item-input-info"></div>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" id='password' name="password" placeholder="Your password" required validate>
<span class="input-clear-button"></span>
<div class="item-input-info"></div>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<div class="block">
<div class="row">
<button id='login' class="col button button-fill">LOG IN</button>
<!-- <a id='login' class="col button button-fill link" href='/dashboard/' >LOG IN</a> -->
</div>
</div>
<div class="block-footer">
<p>New User ? <a href='/register/'>Register Here</a></p>
<p>Forgot Password ? <a href="/forgot-password/" class="close-login-screen">Click Here</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Path to Framework7 Library Bundle JS-->
<script type="text/javascript" src="js/framework7.bundle.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="js/routes.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
</body>
这是我的app.js
// Init App
var app = new Framework7({
id: 'test',
root: '#app',
routes: routes
});
var $$ = Dom7;
var mainView = app.views.create('.view-main',{
dynamicNavbar: true
});
var username = localStorage.getItem('username'); // CHECK USER LOGIN
var password = localStorage.getItem('password'); // CHECK USER LOGIN
var is_logged_in = localStorage.getItem('is_logged_in'); // CHECK USER LOGIN
if(username !="" && username !=null && password !="" && password !=null)
{
console.log('dashboard');
mainView.router.load({url:'pages/home.html', ignoreCache:true, reloadCurrent:true });
}
else
{
console.log('login');
mainView.router.load({url:'index.html', ignoreCache:true, reloadCurrent:true });
}
//login
$$('#login').on('click',function()
{
alert('Login pressed');
var username = $$('#username').val();
var password = $$('#password').val();
if(username != '' && password !='')
{
alert('not blank');
localStorage.setItem("username", username);
localStorage.setItem("password", password);
localStorage.setItem("is_logged_in", '1');
mainView.router.load({url:'pages/home.html', ignoreCache:true, reloadCurrent:true });
}
else
{
alert('Please enter username & password');
}
});
这是我的routes.js
var routes = [
// Index page
{
path: '/',
url: './index.html',
name: 'home',
options: {
transition: 'f7-parallax',
},
},
// Components
{
path: '/dashboard/',
url: './pages/home.html',
name:'dashboard',
options: {
transition: 'f7-parallax',
},
},
]
最后是dashboard.html
<template>
<!-- Page, data-page contains page name-->
<div data-page="dashboard" class="page" data-name='dashboard'>
<!-- TOP NAVBAR-->
<div class="navbar">
<div class="navbar-inner sliding">
<div class="title">Awesome App</div>
<div class="right">
<a href="#" class="link button panel-open" data-panel=".panel-left">
<i class="icon icon-bars"></i>
<span>Menu</span>
</a>
</div>
</div>
</div>
<!-- Scrollable page content-->
<div class="page-content">
<div class="content-block">
<div class="content-block-inner">
<div class="card">
<div class="card-header">New Releases:</div>
<div class="card-content">
Dashboard
</div>
</div>
</div>
</div>
</div>
</div>
<template>