NOTE | Vue — How to redirect to external URL

<router-link to="www.google.com" target="_blank">
www.google.com
</router-link>
http://localhost:8080/#/www.google.com

Method 1

<a href="https://www.google.com" target="_blank">
www.google.com
</a>

Method 2

// HTML
<button @click.stop.prevent="onClick">www.google.com</button>
// JS
methods: {
onClick() {
window.location.href = 'https://www.google.com' // original tab
window.open('https://www.google.com', '_blank') // open new tab
},
}

Method 3

<template>
<div class="about">
<ul>
<li>
<h3> Redirect while create </h3>
</li>
</ul>
</div>
</template>
created() {
window.location.href = 'https://google.com'
}

Method 4

beforeEnter(to, from, next) {
window.location.href = 'https://google.com'
}

Basic tools & settings

  1. Vue 2.6.11
  2. Vue CLI: 4.1.1
  3. Vue router 3.5.1
  4. Vue router mode: hash mode

REPO & DEMO

  1. GitHub repo
  2. DEMO

Reference

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store