F7 v6 can't link page

1

I am getting an error when trying to click on “login” button and navigate to the login page. This is how it looks:

routes.js:
import HomePage from ‘…/pages/home.f7.html’;
import LoginPage from ‘…/pages/login.f7.html’;

import NotFoundPage from '../pages/404.f7.html';

var routes = [
  {
    path: '/',
    component: HomePage,
  },
  {
    path: '/login',
    component: LoginPage,
  },
  {
    path: '(.*)',
    component: NotFoundPage,
  },
];

export default routes;

login.f7.html:

<template>
  <div class="page" data-name="login">
      <div class="page-content">
          <div class="login-screen-title">Bei ganz ohne Passwort anmelden</div>
          <div class="block-header">Melde dich mit deiner E-Mail an.</div>
          <!-- Login form -->
          <div class="block">
              <form id="auth-form-login" action="#">
                  <div class="list inset">
                      <ul>
                          <li class="item-content item-input item-input-outline">
                              <div class="item-inner">
                                  <div class="item-title item-floating-label">E-Mail</div>
                                  <div class="item-input-wrap">
                                      <input type="text" name="email">
                                      <span class="input-clear-button"></span>
                                  </div>
                              </div>
                          </li>
                      </ul>
                  </div>
                  <div class="list">
                      <ul>
                          <li>
                              <a href="#" class="button button-large button-round button-fill button-raised">Anmelden</a>
                          </li>
                      </ul>
                  </div>
              </form>
          </div>
      </div>
  </div>
</template>
<script>
export default (props, { $f7, $, $on }) => {
  return $render;
};
</script>

the link in home.f7.html:
<a href="/login">Login</a>

and the error:

Unhandled Promise Rejection: Error: TypeError: Attempted to assign to readonly property.

2

It isn’t like this path:’/login/’, with close Slash /.
Or is the same.?

3

id doesn’t matter, both doesn’t work

4

I figured it out

simple inputs has to have a trialing /
this is invalid:

                                  <input type="text" name="email" />

but this is alright:

                                  <input type="text" name="email" />
1 Like
5

In v6 all tags need to be closed.