Anchor Tag Navigation

Yugal have special functionality with anchor tag. You can simply use <a> tag to link between other Yugal Pages to achieve SPA. Yugal will modify it for you.

If you have to link a text to about page. Let's say you have defined about page's uri as /about then

<a href="./about">Click Here</a>

This will navigate to About Page without reloading the page if JavaScript is supported in browser, if browser do not support JavaScript then also app will not break, instead in such case Yugal will use traditional way to load the page.

For navigating between Yugal Pages you must pass relative path which begins with . with traillng route name as shown in above examples. Only in such cases Yugal will make SPA Navigation. If provided absolute path or href value begin with / instead of . then Yugal will not process it.

It also supports opening in new tab by using normal way of anchor tag

<a href="./about" target="_blank">Open in New Tab</a> 
<!--THIS WILL OPEN YUGAL ABOUT PAGE IN NEW TAB-->
Code SnippetSupports SPA NavigationSupports Traditional Navigation

<a href="./">HOME</a>

Yes

Yes

<a href="./about">ABOUT</a>

Yes

Yes

<a href="/about">ABOUT</a>

No

Yes

<a href="http://localhost/about">ABOUT</a>

No

Yes

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

No

Yes

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

No

Yes

<a href="../about">About</a>

No

Yes

<a href="./about" target="_blank">

Yes

Yes

See sample code for more example. This will allow crawlers to go to pages defined by you.

Last updated