Angular 4中routerLink条件路由：无URL时禁止跳转至根路由

Hey，这个问题我熟！做层级侧边导航的时候经常碰到这种情况——没有URL的父菜单点击后居然跳去了根路由 /，这本质是因为你给这些父菜单也用了带跳转的元素（比如<a>标签），而当menu.url不存在时，浏览器会把空的href自动解析成当前根路由。下面给你几个靠谱的解决方案：

方案1：模板层面区分跳转/非跳转元素（最推荐） #

核心思路是只在menu.url存在时渲染带跳转功能的元素，否则用普通元素（如<span>/<div>）触发子菜单展开，从根源避免跳转行为。

举几个常见框架的例子： #

• Vue 模板：

<template v-for="menu in menuList" :key="menu.id">
  <!-- 有URL时用router-link或a标签 -->
  <router-link v-if="menu.url" :to="menu.url">
    {{ menu.label }}
  </router-link>
  <!-- 无URL时用普通div触发子菜单展开 -->
  <div v-else class="submenu-trigger" @click="toggleSubmenu(menu.id)">
    {{ menu.label }}
  </div>
  
  <!-- 子菜单渲染逻辑 -->
  <div v-if="menu.expanded" class="submenu">
    <!-- 子菜单内容 -->
  </div>
</template>

• React JSX：

{menuList.map(menu => (
  <div key={menu.id} className="menu-item">
    {menu.url ? (
      <a href={menu.url} className="menu-link">{menu.label}</a>
    ) : (
      <span 
        className="submenu-trigger"
        onClick={() => setExpandedMenus(prev => [...prev, menu.id])}
      >
        {menu.label}
      </span>
    )}
    
    {/* 子菜单 */}
    {menu.expanded && (
      <div className="submenu">
        {/* 子菜单内容 */}
      </div>
    )}
  </div>
))}

• 普通模板引擎（如Handlebars）：

{{#each menuList}}
  {{#if url}}
    <a href="{{url}}" class="menu-link">{{label}}</a>
  {{else}}
    <span class="submenu-trigger">{{label}}</span>
  {{/if}}
  
  {{#if expanded}}
    <div class="submenu">
      <!-- 子菜单内容 -->
    </div>
  {{/if}}
{{/each}}

方案2：通过点击事件阻止默认跳转 #

如果因为某些原因必须用<a>标签渲染所有菜单，可以在点击事件里判断menu.url是否存在，不存在就阻止浏览器的默认跳转行为：

原生JS实现： #

<!-- HTML部分：给无URL的菜单设置data-url为空 -->
<a class="menu-item" data-url="{{menu.url}}" href="{{menu.url || '/'}}">
  {{menu.label}}
</a>

// JS部分：绑定点击事件
document.querySelectorAll('.menu-item').forEach(item => {
  item.addEventListener('click', function(e) {
    const url = this.getAttribute('data-url');
    // 如果没有URL，阻止默认跳转并执行子菜单展开逻辑
    if (!url) {
      e.preventDefault();
      this.classList.toggle('expanded');
      // 其他子菜单展开逻辑...
    }
  });
});

Vue 中结合事件处理： #

<a 
  :href="menu.url || '/'" 
  @click="(e) => handleMenuClick(e, menu)"
>
  {{ menu.label }}
</a>

<script>
export default {
  methods: {
    handleMenuClick(e, menu) {
      if (!menu.url) {
        e.preventDefault();
        this.toggleSubmenu(menu.id);
      }
    }
  }
}
</script>

关键原因总结 #

你现在遇到的跳转至/的问题，是因为当menu.url不存在时，<a>标签的href被设置为空或undefined，浏览器会默认将空href解析为当前页面的根路由（也就是/），所以点击后会跳转过去。上面两种方案都能完美解决这个问题，优先推荐方案1，代码更清晰也更高效。

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