Vue Router：router-link传递动态路径的语法问题求助

你遇到的问题很典型——你现在是把item.route当成了字符串字面量传递给router-link的to属性，而不是绑定到组件props里的item对象的route属性。Vue会把不带绑定的字符串直接解析成固定路径，所以才会出现所有href都是#/item.route的情况。

修复方法 #

只需要给to属性加上v-bind绑定（或者用简写的冒号:），让Vue知道要解析表达式而不是字符串：

修改子组件里的router-link部分：

<li v-on:click="$emit('closeDropdown')">
  <router-link :to="item.route" id="button">{{ item.title }}</router-link>
</li>

或者用完整的v-bind写法也可以：

<li v-on:click="$emit('closeDropdown')">
  <router-link v-bind:to="item.route" id="button">{{ item.title }}</router-link>
</li>

额外检查点 #

• 确保父组件里的userDropdownItems数组中，每个item的route字段确实是有效的路由路径（比如'/profile'、'/settings'这类字符串）。
• 建议在子组件里显式声明item props，避免潜在的类型或未定义问题：

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

这样修改后，router-link就会根据每个item的route值生成对应的href了。

内容的提问来源于stack exchange，提问作者Bitwise