Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

VueJs vue-router linking an external website

This may be simple, but I've looked over documentation and can't find anything about it. I want to have my 'github' link redirect to say, github.com. However, its just appending 'https://github.com' to my url instead of following the link. Here is a snippet:

 <BreadcrumbItem to='https://github.com'>     <Icon type="social-github"></Icon>  </BreadcrumbItem> 

(This is using iView for custom CSS, but 'to' works in the same way as router-link).

What ends up happening is this: enter image description here

like image 595
nateph Avatar asked May 31 '18 21:05

nateph


People also ask

How do I redirect an external URL in Vue?

Redirecting to external URL Suppose we have a /contact route in our vue app, when a user visits the /contact page we need to redirect them to an external url https://www.google.com/contact/ instead of the same domain redirect. To redirect to an external url in Vue, we can use the window. location. href property.

How do I link my website to Vue?

For external links, just use <a href="..."> to point directly to whatever you're linking to. vue-router is only needed for internal links. For now, at least, that's how it works. The <a> tag is not being "abandoned"; to is a vue construct that gives the router a chance to rewrite the url to point back to the SPA.

How do I navigate to another page in Vue?

To navigate to a different URL, use router. push. This method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.

Can I use Vue router with CDN?

You can directly download the latest version of vue-router from CDN. It is available at https://unpkg.com/vue-router/dist/vue-router.js. The unpkg.com contains the npm-based cdn links and always updated to the recent version.


2 Answers

I read Daniel's Link and found a workaround:

{      path: '/github',      beforeEnter() {location.href = 'http://github.com'} } 
like image 81
nateph Avatar answered Nov 05 '22 20:11

nateph


<a :href="'//' + websiteUrl" target="_blank">   {{ url }} </a> 
like image 45
Dani Andújar Avatar answered Nov 05 '22 20:11

Dani Andújar