Vue.js 3中如何绑定数组对象内的URL实现点击跳转？

针对你的需求，这里提供两种常用实现方式，根据项目是否使用Vue Router来选择：

方式一：使用Vue Router（单页应用推荐） #

如果你的项目基于Vue Router，直接用<router-link>组件实现跳转，同时区分带二级导航（subnav）和不带二级导航的项：

修改模板部分：

<template>
  <div class="w-40 h-full fixed bg-gray-800 b-t-white text-sm font-serif font-medium antialiased text-white pl-2 pt-4 z-20">
    <ul id="navigation">
      <li v-for="(item, index) in navigation" :key="'item'+index">
        <i v-if="item.subnav" class="icon" :class="{'ChevronLeftIcon' :!item.open, 'ChevronDownIcon' :item.open }"></i>
        <!-- 区分带二级导航和不带的情况 -->
        <router-link 
          v-if="item.url && !item.subnav" 
          :to="item.url" 
          class="title"
        >
          {{item.title}}
        </router-link>
        <div 
          v-else 
          class="title" 
          @click="item.open = !item.open"
        >
          {{item.title}}
        </div>
        <Dropdown v-if="item.subnav" :list="item" />
      </li>
    </ul>
  </div>
</template>

说明：

• 当导航项有url且无subnav时，用<router-link>包裹，通过:to绑定目标路由地址
• 带subnav的项保留原有点击展开逻辑

方式二：原生跳转（非单页场景） #

如果不需要Vue Router，用原生JS实现页面跳转，统一处理点击事件：

修改模板和脚本部分：

<template>
  <div class="w-40 h-full fixed bg-gray-800 b-t-white text-sm font-serif font-medium antialiased text-white pl-2 pt-4 z-20">
    <ul id="navigation">
      <li v-for="(item, index) in navigation" :key="'item'+index">
        <i v-if="item.subnav" class="icon" :class="{'ChevronLeftIcon' :!item.open, 'ChevronDownIcon' :item.open }"></i>
        <div 
          class="title" 
          @click="handleItemClick(item)"
        >
          {{item.title}}
        </div>
        <Dropdown v-if="item.subnav" :list="item" />
      </li>
    </ul>
  </div>
</template>

<script>
import Dropdown from './Dropdown.vue'
export default {
  components:{Dropdown},
  computed:{
    navigation(){
      return this.$store.getters.navigation;
    }
  },
  methods: {
    handleItemClick(item) {
      // 有二级导航则切换展开状态，否则执行跳转
      if (item.subnav) {
        item.open = !item.open
      } else if (item.url) {
        window.location.href = item.url
        // 同域场景也可使用 window.location.pathname = item.url
      }
    }
  }
}
</script>

说明：

• 用handleItemClick统一处理点击逻辑，避免重复代码
• 先判断是否为二级导航项，再决定执行展开还是跳转

额外优化建议 #

• 给:key绑定更具唯一性的值，比如item.title或专属ID，比'item'+index更可靠
• 如果需要展示icon字段，可在模板中添加<i :class="item.icon"></i>（假设icon为CSS类名）

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