Se você estiver interessado apenas em caminhos relativos como: /dashboard
, /about
etc, Veja outras respostas.
Se você deseja abrir um caminho absoluto como: https://www.google.com
para uma nova guia, você deve saber que o Vue Router NÃO foi feito para lidar com isso.
No entanto, eles parecem considerar isso como uma solicitação de recurso. # 1280 . Mas até que eles façam isso,
Aqui está um pequeno truque que você pode fazer para lidar com links externos com vue-roteador.
- Vá para a configuração do roteador (provavelmente
router.js
) e adicione este código:
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'
link.click()
}
Agora, sempre que lidamos com URLs absolutos, temos uma solução. Por exemplo, para abrir o Google em uma nova guia
this.$router.absUrl('https://www.google.com)
Lembre-se de que, sempre que abrirmos outra página em uma nova guia, DEVEMOS usar noopener noreferrer
.
Leia mais aqui
ou aqui