Vue.js使用v-for循环生成router-link动态路径出现报错如何解决

AI 小北

2026-9-23

错误原因

核心原因是你在 <router-link> 的 to 属性中使用了命名路由 name: 'User'，但全局路由配置里没有注册名为User的路由条目，Vue Router 无法解析出合法的跳转目标，因此触发to属性缺失的警告，后续路由解析逻辑读取不存在的路由属性时，就会抛出Cannot read properties of undefined (reading '_normalized')的报错。
额外说明：即便你不用命名路由改用path路径跳转，当前也没有配置对应动态参数的User路由规则，跳转逻辑依然会失效。

解决方案

先修改main.js文件，引入User组件，补充注册对应的命名路由，修改后的路由配置参考如下：

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
// 新增引入User组件
import User from "./components/User.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    { path: "/", component: HelloWorld },
    // 新增User路由配置
    {
      name: "User", // name属性必须和router-link中填写的完全一致
      path: "/user/:id", // :id对应你要传递的params参数
      component: User
    }
  ]
});

Vue.config.productionTip = false;

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