Vue Vue Router

How it works

Vue Router maps a location to a component view. RouterLink creates navigation links and RouterView marks the outlet. This example uses hash history so the separate learning app can run on simple static hosting without server fallback rules. Real history mode needs the host to return the app shell for valid client routes while still handling missing files and real server endpoints appropriately.

Run the code

Use a separate empty learning folder with Node 22.12+ in the 22 series. The reviewed Node version is 22.15.1. Save all files below with their exact relative paths; downloads may keep only the basename, so create src and any tests folders as listed. This project pins Vue 3.5.44 and Vite 7.3.1, Vue Router 4.6.4. Run npm install, then npm run dev and open the local address Vite prints.

Bhylu has no Vue playground. SFCs, npm imports and routing need this local project; do not paste them into the plain HTML or JavaScript editor. Apache, MySQL and changes to Bhylu server settings are not required. The application is a fictional seed-swap learning fixture.

• package.json
• index.html
• vite.config.mjs
• src/main.js
• src/App.vue
• src/style.css
• src/router.js

Example

<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <main>
    <h1>Riverside seed swap</h1>
    <nav>
      <RouterLink to="/">Desk</RouterLink
      ><RouterLink to="/help">Help</RouterLink>
    </nav>
    <RouterView /><output data-result>Local routes</output>
  </main>
</template>

Expected result

Selecting Help displays the help view and changes the hash location.

The route table is defined once outside the view. A route is not created by naming a file alone. Keep links as links so browser navigation and keyboard use remain familiar. A real application should also update page titles and manage focus after meaningful route changes.

src/router.js

import { createRouter, createWebHashHistory } from "vue-router";
const Desk = { template: "<h2 data-view>Packet desk</h2>" };
const Help = { template: "<h2 data-view>Collection help</h2>" };
export const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: "/", component: Desk },
    { path: "/help", component: Help },
  ],
});