Navigo JS路由器根页面正在重新加载

时间:2020-01-04 02:40:48

标签: javascript ecmascript-6 routing client-side

我是Navigo JS路由器的新手,也是我第一次使用客户端路由器创建应用程序。我已经定义了正在使用的路由,除非导航到主页,否则所有路由都不会触发页面重新加载。

Search.js

const Search = {
  render: () => {
    return `
      <section class="section">
        <div class="row topbar">

          <div class="col-xs-12 col-sm-3">
            <h2 class="title text-xs-center">
              <a href="#/">Home Page</a>
            </h2>
          </div>

        </div>
      </section>
    `;
  }
}

Detail.js

const Detail = {
  render: () => {
    return `
      <section class="section">
        <div class="row topbar">

          <div class="col-xs-12 col-sm-3">
            <h2 class="title text-xs-center">
              <a href="#/">Home Page</a>
            </h2>
          </div>

        </div>


      </section>
    `;
  }
}

Searchbar.js

const Searchbar = {
  render: async () => {
    return `
      <div class="site-search-container pull-right" id="site-search-container">
        <div class="link-search-all">
          <a href="/#/search">View all</a>
        </div>
      </div>`;
  }
}

index.js

const render = async (view) => {
  const header = null || document.getElementsByTagName('header')[0];
  const content = null || document.getElementById('content');
  const footer = null || document.getElementsByTagName('footer')[0];

  // Render the Header and footer of the page
  header.innerHTML = await Header.render();
  await Header.after_render();
  footer.innerHTML = await Footer.render();
  await Footer.after_render();

  content.innerHTML = await view.render();
  await view.after_render();
};

const router = new Navigo(null, true, '#');

router.on({
  '/*/reviews'        : () => { render(Review) },
  '/search'           : () => { render(Search) },
  '/*'                : () => { render(Detail) }
});

// set the default route
router.on(() => { render(Home); });

// set the 404 route
router.notFound(() => { render(Error404); });

router.resolve();

例如,当我按上面“其他路线”所述导航到评论页面或搜索页面时,这些页面不会触发硬加载,这正是我所期望的。但是,一旦导航到主页/根页面,它总是会触发我不想要的硬刷新。

我有一个链接,可用于导航到主页/根页面:

<a href="/">Home Page</a>

有人可以帮忙吗?

谢谢!

0 个答案:

没有答案