FAQs
How can I add Vanilla Router Dom to my project?
The answer to this question has been shared on the Installation page. Please visit the relevant page and choose the option that suits you to include Vanilla Router in your project.
How can I add a router to my project?
The answer to this question has been shared on the Create a Router page. If you would like to see a working version, please refer to the Examples page.
How can I add a 404 page?
To add a 404 page to your project, you can use the following example. This way, the content of the <router-root> will be replaced with the content of the page specified in the route for the not-found pages.
<router-root>
<router-page data-path="*" data-src="path/to/404.html">
</router-root>How should I set the router with subdirectories?
If you want to create a router that works with subdirectories, you need to adhere to certain requirements.
Working with subdirectories, you should use links, images, style files, JavaScript files, router settings (etc.) that are present in all pages of your project by including the project's root directory.
The reason for this is that when the URL is updated, the browser will search for files based on the new URL. For example, the file "./path/to/img.png" will be searched as "./path/to/newpath/img.png" after the URL is updated. Naturally, it won't be found, leading to a series of issues that you would have to deal with.
Below are examples provided for correct and incorrect usages. (Remember, this is required for all elements contain links.)
<!-- Incorrect usage example -->
<a href="./path/to/"></a>
<script src="./path/to/script.js"></script><!-- Correct usage example -->
<a href="/project/path/to/"></a>
<script src="/project/path/to/script.js"></script>How is the content of the <head> tag and also the <script> tags updated?
The default <head> content to be used for all pages in the project, as well as the <script> tags to be executed on all pages, should be defined in index.html. Then, for each individual page, a separate <head> content and necessary <script> tags should be added.
The added content is used specifically for that page by the router, and when transitioning to a new page, the added content is removed, and the
content of the new page is added. The same applies to script tags.To see how it is done and for more information, please refer to the Create a Router and Examples pages.