Framework7框架中<a>标签跳转失效问题求助

Hey there, let's get that link working properly! Looking at your code, there are a few syntax and configuration issues that are causing the problem. Here's what's wrong and how to fix it:

1. Correct Variable & Constructor Names #

• JavaScript variable declarations use lowercase var (not Var)
• The Framework7 constructor is Framework7, not Framework — that's the official name of the framework's core initializer.

2. Fix Route Configuration Key #

Framework7 expects routing settings under the lowercase routes property (not Route), and it needs to be an array of route objects. This is a case-sensitive configuration key the framework looks for to map paths to pages.

3. Update Your Link's Href #

Your link should match the exact path defined in your route. Change <a href="page1" class="link">link1</a> to <a href="/page1" class="link">link1</a> — adding the leading slash ensures the router recognizes it as a top-level route path.

Corrected Full Code #

var app = new Framework7({
  routes: [
    {
      path: '/page1',
      url: 'page/page1.html'
    }
  ]
});

Quick Bonus Check #

Double-check that your page/page1.html file exists in the correct directory relative to your main app file, and that it follows Framework7's page structure (it should have a <div class="page"> wrapper as the root element of the page content).

内容的提问来源于stack exchange，提问作者Sagar Shinde