//main.js

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [{ path: "/", component: HelloWorld }]
});

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App)
}).$mount("#app");

//User.vue

<template>
  <div>
    <form>
      <label>First name:</label><br />
      <input type="text" id="fname" name="fname" /><br />
      <label>Last name:</label><br />
      <input type="text" id="lname" name="lname" /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </div>
</template>

<script>
export default {
  name: "User",
};
</script>

//HelloWorld.vue

<template>
  <div>
    <b>Vuejs dynamic routing</b>
    <div v-for="item in items" :key="item.id">
      <b>{{ item.id }}.</b> &nbsp;&nbsp;&nbsp;
      <router-link :to="{ name: 'User', params: { id: item.id } }">
        {{ item.kk }}
      </router-link>
    </div>
    <br /><br /><br />
    <User />
  </div>
</template>

<script>
import User from "./User.vue";
export default {
  name: "HelloWorld",
  components: {
    User,
  },
  data() {
    return {
      items: [
        { id: 1, val: "1", kk: "mm" },
        { id: 2, val: "22", kk: "aa" },
        { id: 3, val: "55", kk: "dd" },
        { id: 4, val: "77", kk: "gg" },
      ],
    };
  },
};
</script>