Framework7 页面 路由

首先明确：framework7是单页面模式，所有的展现全是同一个页面，只是每个页面的组件不一样。因为Framework7是通过Ajax在不同页面间跳转的，所以你需要启动一个 http 服务器才可以（不要直接打开本地文件)

 

Ajax页面

默认情况下 Framework7 会使用 Ajax 加载所有的页面，除了带有 external class的链接（<a href="somepage.html" class="external">）和没有正确 href 值的链接（比如是空的或者是 #）。 在初始化时候传递不同的 ajaxLinks 参数可以改变这个行为。

所以我们如果需要创建一个链接指向 about.html，我们只需要按照平时一样写 <a>标签就可以

<a href="about.html">Go to About page</a>

当我们点击这个链接的时候，Framework7会通过Ajax获取 about.html，解析它的内容，然后把它插入到DOM中，并且做一个动画切换到这个新页面。

有时候你在加载页面或者后退的时候需要立刻执行，不想要一个切换的动画效果，可以通过增加一个 "no-animation" class 在链接上即可。

<div class="page" data-page="about">
  <-- Add additional "no-anmation" class to link to diable animated page transition -->
  <a href="about.html" class="no-animation"> Load About page immediately </a>
  
  <-- The same rule for back link -->
  <a href="index.html" class="back no-animation"> Go back immediately </a>
</div>

如果我们已经全局禁用了动画，但是在某些链接上希望启用这些动画，那么我们可以给链接加上 "with-animation" class。

<div class="page" data-page="about">
  <!-- Add additional "with-anmation" class to link to enable animated page transition -->
  <a href="about.html" class="with-animation"> Load About page with animation </a>
 
  <!-- The same rule for back link -->
  <a href="index.html" class="back with-animation"> Go back with animation </a>
</div>

 后退链接用class="back"

<div class="page" data-page="about">
  <!-- Just add additional "back" class to link -->
  <a href="index.html" class="back"> Go back to home page </a>
</div>

 方法二：用Javascript实现加载页面

var myApp = new Framework7();
        
// Initialize View          
var mainView = myApp.addView('.view-main')          
        
// Load page from about.html file to main View:
mainView.router.loadPage('about.html');

 用Javascript实现后退

// Initialize App  
var myApp = new Framework7();
        
// Initialize View          
var mainView = myApp.addView('.view-main')          
        
// Go back on main View
mainView.router.back();

页面视图之间的跳转

1).Framework7 可以让我们不使用JS来实现，所有需要做的只是在连接上增加一个 data-view 属性，这个属性包含一个CSS选择器指向需要放入的那个View即可。

<!-- left view -->
<div class="view view-init view-left" data-name="left">
  ...
  <!-- will load "some-page" to main view -->
  <a href="/some-page/" data-view=".view-main">Some Page</a>
  ...
</div>
<!-- main view -->
<div class="view view-init view-main">
  ...
  <!-- will load "another-page" to left view -->
  <a href="/another-page/" data-view=".view-left">Another Page</a>
  ...
</div>

2)Router:也可以通过全局路由配置实现页面之间的跳转, 参数中path是路由的路径，在点击路由匹配的链接时，将会加载这个路由路径对应路径的文件，还有一个url，通过调用 Ajax 加载页面

routes: [
  // Load via Ajax
  {
    path: '/about/',
    url: './pages/about.html',
  },
  // By template
  {
    path: '/template/:name/',
    template: `
      <div class="page">
        <div class="page-content">
          <div class="block">
            <p>Hello {{$route.params.name}}</p>
          </div>
        </div>
      </div>
    `,
  },
  // By component url
  {
    path: '/page-loader-template7/:user/:userId/:posts/:postId/',
    templateUrl: './pages/page-loader-template7.html',
    // additional context
    options: {
      context: {
        foo: 'bar', //{{foo}}
      },
    },
  },
  {
	path: '/users/:userId/posts/:postId',
	url: 'http://myapp.com/posts/{{userId}}/{{postId}}'
  },
  // Async
  {
    path: '/something/',
    async: function (routeTo, routeFrom, resolve, reject) {
      // Requested route
      console.log(routeTo);
      // Get external data and return template7 template
      app.request.json('http://some-endpoint/', function (data) {
        resolve(
          // How and what to load: template
          {
            template: '<div class="page">{{users}}</div>'
          },
          // Custom template context
          {
            context: {
              users: data,
            },
          }
        );
      });
    }
  }

 这里同样支持动态路由。所以如果你设置了如 /blog/users/:userId/posts/:postId/ 的路由，并且点击了 /blog/users/12/posts/25 的链接,那么将会在页面的 route.params 读取包含参数 { userId: 12, postId: 25 } 的对象。 当你看见视图页面用到了{{title}}使用到了Template7。Template7是Framework7内置模板引擎