[Vuejs]-Wrapping cards in router-link in order to change to another view

by

0👍

You don’t use Vue router for external routing, it only handles the routing within your app. Use vanilla js for this.

window.location = 'http://www.example.com';

or

location.replace('http://example.com');

or

window.open('http://example.com');

if the url is inside your app:

<router-link :to="{ path: `${info.url}` }">
  <div class="card">
            <img class="card-img-top" :src="info.url" />
            <div class="centered">{{ info.description }}</div>
      </div>
</router-link>

if the view is outside of the app:
create a new method:

methods:{
 goToExternal(url){
  window.location = url;
 }
}

 <div class="card" @click="goToExternal(info.url)">
                <img class="card-img-top" :src="info.url" />
                <div class="centered">{{ info.description }}</div>
          </div>

Leave a comment