vuejs / vue-router

🚦 The official router for Vue 2
http://v3.router.vuejs.org/
MIT License
18.99k stars 5.06k forks source link

Accepting named target for router-link #3116

Open service-paradis opened 4 years ago

service-paradis commented 4 years ago

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 commented 4 years ago

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>
fy0 commented 7 months ago

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 Githubissues.

  • Githubissues is a development platform for aggregating issues.