在 Vuejs 中使用 v-for 循环的路由器链接动态路径问题？

Question

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

在 Vuejs 中使用 v-for 循环的路由器链接动态路径问题？

我收到如下错误：- [Vue 警告]：缺少必需的道具：“to”[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性（读取 '_normalized'）”TypeError：无法读取属性未定义（阅读“_normalized”）

此处更新代码：- https://codesandbox.io/s/suspicious-germain-vepmk?file=/src/App.vue

Answer 1

你的代码有问题

• 您已将路由名称定义为“预览”，但在路由器链接中使用“用户”
• 您没有使用 < router-view > 标记，该标记用于显示更改的组件，基本上您应该在 app.vue 中使用它

您应该在您的应用程序或主要组件中添加路由器视图，以便在路由后查看组件的更改。 您还可以添加一些您面临的问题的屏幕截图，因为您的问题不是很清楚。

编辑：要从 url 中删除＃，您应该使用历史模式，例如

Answer 2

在您的循环中，您访问不存在的item.param 。 我想你想访问item.id

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

一个小的附加说明 - 您还应该将 id 设置为循环中的键

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

编辑

在您的代码和框中，您似乎有一些错误（由于在 main 中缺少用户组件的导入而无法构建）

但是，您还需要使用您在 main.js 中定义的路由名称preview

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

更重要的是：您似乎没有定义路由器视图。 如果没有路由器视图，您的路由组件将不会显示。

这里似乎有很多小错误很难用一个答案来总结 - 请查看路由器视图的文档（ https://router.vuejs.org/guide/#html ）