Element: [Bug Report] breadcrumb links are not <a> tags

Created on 21 May 2019 · 4Comments · Source: ElemeFE/element

Element UI version

2.8.2

OS/Browsers version

Chrome

Vue version

2.6.10

Reproduction Link

https://jsfiddle.net/bwoL2j7t/

Steps to reproduce

Right click on the breadcrumb link

What is Expected?

Breadcrumb links should be <a> tags, thus having open in new tab / window option.

What is actually happening?

Breadcrumb links are not real <a> links, thus it is impossible to do normal link actions like open in a new tab or a new window.

stale

Source

aure-olli

👍3

Most helpful comment

Yeah I agree, but what are the use cases of the to attributes of breadcrumb-item without generating a router-link ? I saw that breadcrumb-item is checking for the router library already:

      link.addEventListener('click', _ => {
        const { to, $router } = this;
        if (!to || !$router) return;
        this.replace ? $router.replace(to) : $router.push(to);
      });

In that case, why not directly generating a router-link if available ? If not availablem the link is not working anyway.

    <router-link
      v-if="to"
      class="el-breadcrumb__inner is-link"
      ref="link"
      role="link"
      :to="to">
      <slot></slot>
    </router-link>
    <span
      v-else
      class="el-breadcrumb__inner"
      ref="link"
      role="link">
      <slot></slot>
    </span>

It looks like a link, it acts like a link: it has to be a link.

aure-olli on 22 May 2019

👍3

All 4 comments

You can put an a or router-link inside the breadcrumb-item tag though.

rlightner on 21 May 2019

Yeah I agree, but what are the use cases of the to attributes of breadcrumb-item without generating a router-link ? I saw that breadcrumb-item is checking for the router library already:

      link.addEventListener('click', _ => {
        const { to, $router } = this;
        if (!to || !$router) return;
        this.replace ? $router.replace(to) : $router.push(to);
      });

In that case, why not directly generating a router-link if available ? If not availablem the link is not working anyway.

    <router-link
      v-if="to"
      class="el-breadcrumb__inner is-link"
      ref="link"
      role="link"
      :to="to">
      <slot></slot>
    </router-link>
    <span
      v-else
      class="el-breadcrumb__inner"
      ref="link"
      role="link">
      <slot></slot>
    </span>

It looks like a link, it acts like a link: it has to be a link.

aure-olli on 22 May 2019

👍3

I agree. Using regular a tags is very useful for copying links and opening them in a new browser window/tab. The same should be implemented in the nav menu component. On the web links should be links I believe.

ppisecky on 4 Aug 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.