[SOLVED][V2] A href only works with external

Questions
1

A href only works with “external” class? I must be missing something simple. I don’t have any routes assigned because I didn’t need to in V1. Do I need a route for every page in V2 to make this work?

<!DOCTYPE html>
<html style="overflow: hidden;">
<head>
  <link rel="stylesheet" href="css/framework7.min.css" />
  <script src="js/framework7.min.js"></script>
  </head>
<body>
<div id="app">
  <a class="link" href="pages/settings.php">Test</a>
</div>
<script type="text/javascript">
new Framework7({
  root:'#app',
  name:'Tools',
  id:'com.test.tools',
});
</script>
</body>
</html>
2

yes you need to define all routes … also all your pages should have right structure

just download the link and base your code on this

4

By that logic, shouldn’t this page route to 404.html? This link also goes nowhere.

<!DOCTYPE html>
<html style="overflow: hidden;">
<head>
  <link rel="stylesheet" href="css/framework7.min.css" />
  <script src="js/framework7.min.js"></script>
  </head>
<body>
<div id="app">
  <div class="view">
    <div class="page" data-name="home">
      <div class="page-content">
        <a class="link" href="pages/NonExPage.php">Test</a>
      </div>
    </div>
  </div>
</div>
<script>
(function() {
  new Framework7({
    root:'#app',
    name:'Tools',
    id:'com.test.tools',
    routes: [
      {
        path: '(.*)',
        url: './pages/404.html',
      },
    ],
  });
})();
</script>
</body>
</html>

https://jsfiddle.net/7tymucpk/7/

5

Okay, figured it out.

Blanket fix:

routes: [
{
  path: '/pages/:page',
  url: 'pages/{{page}}',
},
{
  path:'(.*)',
  url:'./pages/404.php',
}

]

links must start with slash:
<a class="link" href="/pages/settings.php">Test</a>
Works
<a class="link" href="pages/settings.php">Test</a>
Does not work