//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>
<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”）
此處更新代碼：- 
uj5u.com熱心網友回復：
在您的回圈中，您可以訪問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 中用戶組件的匯入而無法構建）
但是，您還需要使用preview您在 main.js 中定義的路由名稱
<router-link :to="{ name: 'preview', params: { id: item.id } }">
{{ item.kk }}
</router-link>
更重要的是：您似乎沒有定義路由器視圖。如果沒有路由器視圖，您的路由組件將不會顯示。
這里似乎有很多小錯誤，很難用一個答案來總結 - 請查看路由器視圖的檔案（https://router.vuejs.org/guide/#html）
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375539.html
標籤：javascript Vue.js
上一篇：如何從html元素獲取陣列索引？