router-link का उपयोग

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
</head>
<body>
<div id="app">
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link :to="{ name: 'about' }">About</router-link>
  </nav>
  <router-view></router-view>
</div>
<script>
  const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes: [
      { path: "/", component: { template: "<p>Home content</p>" } },
      { path: "/about", name: "about", component: { template: "<p>About content</p>" } },
    ],
  });
  Vue.createApp({}).use(router).mount("#app");
  router.isReady().then(async () => {
    document.querySelectorAll("a")[1].click();
    await router.isReady(); await Vue.nextTick(); await new Promise((r) => setTimeout(r, 30));
    console.log("path:", router.currentRoute.value.path, "| view:", document.querySelector("p").textContent);
  });
</script>
</body>
</html>

<!-- Output:
Rendered: Home | AboutAbout content
console: path: /about | view: About content
-->