link1233 link1234 link1235 link1236 link1237 link1238 link1239 link1240 link1241 link1242 link1243 link1244 link1245 link1246 link1247 link1248 link1249 link1250 link1251 link1252 link1253 link1254 link1255 link1256 link1257 link1258 link1259 link1260 link1261 link1262 link1263 link1264 link1265 link1266 link1267 link1268 link1269 link1270 link1271 link1272 link1273 link1274 link1275 link1276 link1277 link1278 link1279 link1280 link1281 link1282 link1283 link1284 link1285 link1286 link1287 link1288 link1289 link1290 link1291 link1292 link1293 link1294 link1295 link1296 link1297 link1298 link1299 link1300 link1301 link1302 link1303 link1304 link1305 link1306 link1307 link1308 link1309 link1310 link1311 link1312 link1313 link1314 link1315 link1316 link1317 link1318 link1319 link1320 link1321 link1322 link1323 link1324 link1325 link1326 link1327 link1328 link1329 link1330 link1331 link1332 link1333 link1334 link1335 link1336 link1337 link1338 link1339 link1340 link1341 link1342 link1343 link1344 link1345 link1346 link1347 link1348 link1349 link1350 link1351 link1352 link1353 link1354 link1355 link1356 link1357 link1358 link1359 link1360 link1361 link1362 link1363 link1364 link1365 link1366 link1367 link1368 link1369

[Vue.js] Can vue-router open a link in a new tab?

there is a summary page and a detail subpage. All of the routes are implemented with vue-router (v 0.7.x) using programmatic navigation like this:

this.$router.go({ path: “/link/to/page” })

However, when I route from the summary page to the subpage, I need to open the subpage in a new tab just as one would by adding _target=”blank” to an <a> tag.

Is there a way to do this?

Solution :

I think that you can do something like this:

let routeData = this.$router.resolve({name: ‘routeName’, query: {data: “someData”});, ‘_blank’);

it worked for me.

Solution 2:

It seems like this is now possible in newer versions (vue.js Router 3.0.1):

<router-link :to=”{ name: ‘fooRoute’}” target=”_blank”>
Link Text

Solution 3:

For those who are wondering the answer is no.
See related issue on github.

Q: Can vue-router open link in new tab progammaticaly

A: No. use a normal link.

Solution 4:

In case that you define the route like the one asked in the question (path: ‘/link/to/page’):

import vue.js from ‘vue’
import Router from ‘vue-router’
import MyComponent from ‘@/components/MyComponent.vue’;


export default new Router({
routes: [
path: ‘/link/to/page’,
component: MyComponent

You can resolve the URL in the summary page and open the sub page as below:

export default {
methods: {
popup() {
let route = this.$router.resolve({path: ‘/link/to/page’});
// let route = this.$router.resolve(‘/link/to/page’); // This also works., ‘_blank’);

Of course if you’ve given the route a name, you can resolve the URL by name:

routes: [
path: ‘/link/to/page’,
component: MyComponent,
name: ‘subPage’

let route = this.$router.resolve({name: ‘subPage’});


vue-router router.resolve(location, current?, append?)
vue-router router-link

Solution 5:

I think the best way is to simply use:“yourURL”, ‘_blank’);

* flies away *