У меня есть сводная страница и дополнительная страница с подробностями. Все маршруты реализованы в vue-router
(v 0.7.x) с использованием такой программной навигации:
this.$router.go({ path: "/link/to/page" })
Однако, когда я перехожу со страницы сводки к подстранице, мне нужно открыть подстраницу на новой вкладке так же, как если бы я добавлял _target="blank"
ее в <a>
тег.
Есть ли способ сделать это?
javascript
vue.js
vue-router
Тан Цзюн
источник
источник
Ответы:
Я думаю, что можно сделать что-то вроде этого:
let routeData = this.$router.resolve({name: 'routeName', query: {data: "someData"}}); window.open(routeData.href, '_blank');
у меня это сработало. Спасибо.
источник
Похоже, что теперь это возможно в более новых версиях (Vue Router 3.0.1):
<router-link :to="{ name: 'fooRoute'}" target="_blank"> Link Text </router-link>
источник
this.$router.push()
.Для тех, кому интересно, ответ отрицательный. См. Соответствующую проблему на github.
источник
target="_blank"
к<router-link>
тегу в v3 stackoverflow.com/a/49654382/2678454В случае, если вы определяете свой маршрут, как тот, который задан в вопросе (путь: '/ link / to / page'):
import Vue from 'vue' import Router from 'vue-router' import MyComponent from '@/components/MyComponent.vue'; Vue.use(Router) export default new Router({ routes: [ { path: '/link/to/page', component: MyComponent } ] })
Вы можете разрешить URL-адрес на странице сводки и открыть дополнительную страницу, как показано ниже:
<script> export default { methods: { popup() { let route = this.$router.resolve({path: '/link/to/page'}); // let route = this.$router.resolve('/link/to/page'); // This also works. window.open(route.href, '_blank'); } } }; </script>
Конечно, если вы дали своему маршруту имя, вы можете разрешить URL-адрес по имени:
routes: [ { path: '/link/to/page', component: MyComponent, name: 'subPage' } ] ... let route = this.$router.resolve({name: 'subPage'});
Ссылки:
источник
Где-то в вашем проекте, обычно main.js или router.js
import Router from 'vue-router' Router.prototype.open = function (routeObject) { const {href} = this.resolve(routeObject) window.open(href, '_blank') }
В вашем компоненте:
<div @click="$router.open({name: 'User', params: {ID: 123}})">Open in new tab</div>
источник
Я думаю, что лучший способ - просто использовать:
window.open("yourURL", '_blank');
🚀 * улетает *
источник
Просто напишите этот код в свой файл маршрутизации:
{ name: 'Google', path: '/google', beforeEnter() { window.open("http://www.google.com", '_blank'); } }
источник
Это сработало для меня-
let routeData = this.$router.resolve( { path: '/resources/c-m-communities', query: {'dataParameter': 'parameterValue'} }); window.open(routeData.href, '_blank');
Я изменил ответ @Rafael_Andrs_Cspedes_Basterio
источник
Если вас интересуют ТОЛЬКО относительные пути, такие как:
/dashboard
и/about
т. Д., См. Другие ответы.Если вы хотите открыть абсолютный путь, например:
https://www.google.com
к новой вкладке, вы должны знать, что Vue Router НЕ предназначен для их обработки.Однако, похоже, они рассматривают это как просьбу о функции. # 1280 . Но пока они этого не сделают,
router.js
) и добавьте этот код:/* Vue Router is not meant to handle absolute urls. */ /* So whenever we want to deal with those, we can use this.$router.absUrl(url) */ Router.prototype.absUrl = function(url, newTab = true) { const link = document.createElement('a') link.href = url link.target = newTab ? '_blank' : '' if (newTab) link.rel = 'noopener noreferrer' // IMPORTANT to add this link.click() }
this.$router.absUrl('https://www.google.com)
Помните, что всякий раз, когда мы открываем другую страницу на новой вкладке, мы ДОЛЖНЫ использовать
noopener noreferrer
.Подробнее здесь
или здесь
источник
Это работает для меня:
В шаблоне HTML:
<a target="_blank" :href="url" @click.stop>your_name</a>
В смонтированном ():
this.url = `${window.location.origin}/your_page_name`;
источник
Самый простой способ сделать это с помощью якорного тега:
<a :href="$router.resolve({name: 'posts.show', params: {post: post.id}}).href" target="_blank"> Open Post in new tab </a>
источник