我是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>
有人可以帮忙吗?
谢谢!