Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accepting named target for router-link #3116

Open
service-paradis opened this issue Feb 6, 2020 · 2 comments
Open

Accepting named target for router-link #3116

service-paradis opened this issue Feb 6, 2020 · 2 comments
Labels
discussion feature request fixed on 4.x This issue has been already fixed on the v4 but exists in v3 has workaround

Comments

@service-paradis
Copy link

What problem does this feature solve?

Right now, if we want to open a link in a new tab (or page), we can use target="_blank".

In some cases, I prefer using named target when opening a new tab. This way, if we click multiple times on the same link, it will only refresh the named tab already opened.

Accepting something like target="my_report" would be great. Right now, the target attribute is added to the a tag, but the link is not opened on another tab.

What does the proposed API look like?

Accepting named target and opening them in new tabs

@posva
Copy link
Member

posva commented Feb 6, 2020

Maybe we shouldn't listen to the click event if target is present, treating the anchor as a regular link and not using pushState at all

For the moment, you can use the v-slot api:

<router-link
  to="/foo"
  v-slot="{ href }"
>
    <a :href="href" target="my_report">Link</a>
  </li>
</router-link>

@posva posva added the fixed on 4.x This issue has been already fixed on the v4 but exists in v3 label Oct 28, 2021
@fy0
Copy link

fy0 commented Mar 31, 2024

it works now, but can't be compiled with lang='tsx' (vue-router 4.1.6):

error TS2322: Type '{ to: { name: string; params: { id: string; }; }; target: string; class: string; }' is not assignable to type 'IntrinsicAttributes & AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterLinkProps'.
  Property 'target' does not exist on type 'IntrinsicAttributes & AllowedComponentProps & ComponentCustomProps & VNodeProps & RouterLinkProps'.

skiped type check by:

export const RouterLinkX = RouterLink as any;

then use RouterLinkX to replace RouterLink in <script lang="tsx"> sections.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion feature request fixed on 4.x This issue has been already fixed on the v4 but exists in v3 has workaround
Projects
None yet
Development

No branches or pull requests

3 participants