Issue with router-link dynamic path using v-for loop in Vuejs?-CodePudding

//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>

Issue with router-link dynamic path using v-for loop in Vuejs?

I am getting error as below:- [Vue warn]: Missing required prop: "to" [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '_normalized')" TypeError: Cannot read properties of undefined (reading '_normalized')

Updated Code here:- https://codesandbox.io/s/suspicious-germain-vepmk?file=/src/App.vue

CodePudding user response：

In your loop you access item.param which does not exist. I suppose you want to access item.id

<router-link :to="{ name: 'User', params: { id: item.id } }">
  {{ item.kk }}
</router-link>

A small additional remark - you should also set the id as key in your loop

<div v-for="item in items" :key="item.id">

EDIT

In your codesandbox you seem to have some errors (doesn't build due to missing import of User component in main)

However you will also need to use the route name preview as you defined it like this in your main.js

<router-link :to="{ name: 'preview', params: { id: item.id } }">
  {{ item.kk }}
</router-link>

AND even more important: You don't seem to define a router-view. Without a router-view your route component will not be displayed.

There seem to be many little mistakes here that are hard to sum up in one answer - please check the docs (https://router.vuejs.org/guide/#html) for the router-view

CodePudding user response：

There are issues in your code

You have defined route name as 'preview' but using 'user' in your router-link
You are not using which is used to show changed component basically you should use it in your app.vue

You should add router-view in your app or main component where you want to see change in component after routing. Also can you add some screenshots of what issues you are facing as it is not very clear from your question.