search

carbon-design-system / carbon-components-vue

Vue implementation of the Carbon Design System
http://vue.carbondesignsystem.com
Apache License 2.0
609 stars 179 forks source link

replacing router-link with cv-link breaks navigation #506

Closed aharbis closed 5 years ago

aharbis commented 5 years ago

Detailed description

When trying to replace the Vue Router <router-link> elements with <cv-link> elements, the app navigation and routing breaks.

Starting with the following nav:

<div id="nav">
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
</div>

switching to the following breaks:

<div id="nav">
  <cv-link to="/">Home</cv-link> |
  <cv-link to="/about">About</cv-link>
</div>

With the router-link elements I can navigate back and forth between Home and About with no problem. After switching these elements out for cv-link elements, the routing breaks. To elaborate a bit, this is what is rendered on a fresh page load of Home:

<div id="nav">
  <a href="#/" class="cv-link bx--link router-link-exact-active router-link-active">Home</a> |
  <a href="#/about" class="cv-link bx--link">About</a>
</div>

After clicking on About the following is rendered:

<div id="nav">
  <a class="cv-link bx--link router-link-active">Home</a> |
  <a class="cv-link bx--link router-link-exact-active router-link-active">About</a>
</div>

Since the href attributes were dropped, the links are inactive. This seems unexpected.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug, I think.

Is this issue related to a specific component?

CvLink and its use with Vue Router.

What did you expect to happen? What happened instead? What would you like to see changed?

<router-link> elements should be able to be replaced with <cv-link> elements without issues.

What browser are you working in?

Chrome (Version 76.0.3809.87 (Official Build) (64-bit))

What version of the Carbon Design System are you using?

@carbon/vue@2.12.4
carbon-components@10.3.1
lee-chase commented 5 years ago

False dawn, will work for cv-link needs work for other link types.

Update later today.

lee-chase commented 5 years ago

@aharbis published a canary build (2.12.5-canary.0) to give me a chance to run a few tests. It was not obvious why the previous version failed after an about click so I will run up a sample to test each component affected by this change.

I believe it fixes this issue, but will leave open pending further checks.

aharbis commented 5 years ago

I tested briefly against @carbon/vue@2.12.5-canary.0 and that seemed to resolve the issue.

lee-chase commented 5 years ago

Fixed with 2.12.5 release.