CODEWITHSUNDEEP
vue.js
Hiru Sepalika
Hiru Sepalika

Reputation: 1

How to make a list element clickable and redirect to a url in vue.js

I am using vue.js. I have a nav bar set up and it has a bunch of list elements. I would like one of my list elements to go to another website for example, https://www.google.com/. I have a router file that has multiple children (for each element in my list), and for each child there are three components,

the path, component, name.

In the nav bar I have everything set up like this,

<li v-bind:class="{active: $route.name == '//name from router file for   
that child'}">
  <router-link to="//path for that child">Google</router-link>
</li>

I have created a vue file for the route.name which is Google.vue. The way this is set up, I have everything added onto the localhost path name. However, I want this particular list element to go to www.google.com instead of adding onto the path. Is this possible? if it is, where should I add this link to?

Upvotes: 0

Views: 6897

Answers (3)

Stephen Thomas
Stephen Thomas

Reputation: 14053

Just use an anchor tag instead of a router link

<li>
    <a class="text-link" href="www.google.com">Google</a>
</li>

And style it however you wish

.text-link,
.text-link:active,
.text-link:focus,
.text-link:hover,
.text-link:visited {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

Upvotes: 1

hootiehoo
hootiehoo

Reputation: 118

For updated question:

Option 1: Remove <router-link> tag and have your link look like:

<li @click="redirect('https://google.com')" v-bind:class="{active: $route.name == '//name from router file for   
that child'}"></li>

... in your .vue file redirect: function (url) { window.location=url; }

Option 2: Add navigation guard to your google route.

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

https://router.vuejs.org/guide/advanced/navigation-guards.html#global-after-hooks

Upvotes: 0

Adam Johnston
Adam Johnston

Reputation: 1411

<li v-on:click="window.location='https://www.google.com/'">Go to Google</li>

Upvotes: 0

Related Questions