Can vue-router open a link in a new tab?
I think that you can do something like this:
let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}});
window.open(routeData.href, '_blank');
It worked for me.
Vuetify : How to configure VueRouter to open link on a new tab?
Don't use a click
-handler with the v-list-item
, since that defeats the underlying anchor tag generated for the routing, and has accessibility implications. Stick with the v-list-item
's props that are built in for routing:
href
: To create an external link with<v-list-item>
, use thehref
prop. Internal links should useto
instead.target
: To open a new window upon clicking the link, use thetarget="_blank"
prop.
A v-list-item
that links to an external URL would use the href
prop like this:
<v-list-item href="https://google.com">Google</v-list-item>
And one that opens a new tab would use the target="_blank"
prop:
<v-list-item target="_blank" href="https://google.com">Google</v-list-item>
Internal links use the to
prop instead of href
:
<v-list-item to="/dashboard">Dashboard</v-list-item>
And they could be opened in a new tab with target="_blank"
as well:
<v-list-item target="_blank" to="/dashboard">Dashboard</v-list-item>
Solution
In your case, you have an array of items that need to bind the previously mentioned props conditionally. That's best done using v-bind
with an object (where the object's key-value pairs are bound as component props) that is computed based on each item's properties:
- Compute a new array of links (named
computedLinks
) that has a new prop to bind (namedlinkProps
):
export default {
computed: {
computedLinks() {
return this.links.map(link => {
const isExternalLink = url => /^((https?:)?\/\/)/.test(url)
const linkProps = {
[isExternalLink(link.route) ? 'href' : 'to']: link.route,
}
if (link.newTab) {
linkProps.target = '_blank'
}
return {
...link,
linkProps,
}
})
},
},
}
- Update the template to use
computedLinks
, and bind each link'slinkProps
to its correspondingv-list-item
:
<v-list-item v-for="link in computedLinks" :key="link.text" v-bind="link.linkProps">
br>
demo
Nuxt: How to open page in a new tab
The whole point of vue-router is navigating inside a single page application so it doesn't have a way to navigate to a blank new tab as far as I know. Fortunately there is an old fashioned thing called 'html' which has something called an anchor tag that you can use like this:
<a href="/user" target="_blank">User</a>
Related Topics
Invalid Attempt to Spread Non-Iterable Instance
Set Focus to the Next Input Element
How Does Group by Works in Sequelize
No Overload Matches This Call. Type 'String' Is Not Assignable to Type 'Signals'
Javascript Ajax Not Working on ASP.NET C# and Returns a 404
What Is the Opposite of Evt.Preventdefault();
Show 2 Items Per Row[React Native]
How to Get the Value of Li on Dropdown Menu Click in Laravel Using Jquery
How to Detect the Mime Type of Data Url
Process a Dictionary and Return Each Entry in React
Google Charts - Labels Are Not Showing
Render a Table Body in React Using the Map Function
How to Include Third Party Js Libraries in React App
Get Substring Between Two Characters Using JavaScript
How to Append Whole Set of Model to Formdata and Obtain It in MVC