单击链接并重定向时，如何添加活动类？

Question

My vue component is like this:

<template>
    <div>
        ...
        <div class="list-group">
            <a :href="baseUrl+'/message/inbox'" class="list-group-item">
                Message
            </a>
            <a :href="baseUrl+'/message/review'" class="list-group-item">
                Review
            </a>
            <a :href="baseUrl+'/message/resolution'" class="list-group-item">
                Resolution
            </a>
        </div>
        ...
    </div>
</template>
<script>
    export default {
        ...
        data() {
            return {
                baseUrl: window.Laravel.baseUrl
            }
        },
        ...
    }
</script>

When the link is clicked, it will call the url, I want to add class active on the clicked link after reloading the page.

But, I'm still confused, How can I do it?

Answer 1

You could add a computed property, say, currentPath :

computed: {
  currentPath () {
    // grab current url and return the part after `baseUrl `
    // e.g. '/message/inbox' or '/message/review'
    return '/message/inbox'
  }
}

And a CSS class for your special style:

.active-item {
  /* key-value pairs here */
}

Then in your template, you could apply the class to the matched item:

<a :href="baseUrl+'/message/inbox'"
   :class="{ 'active-item': currentPath === '/message/inbox'}">
   class="list-group-item">Message</a>
<a :href="baseUrl+'/message/review'"
   :class="{ 'active-item': currentPath === '/message/review'}">
   class="list-group-item">Review</a>

Please read the doc on binding HTML classes with object syntax

Answer 2

Adding to Leo's answer, it's a good idea to introduce a component which will auto detect is active or not, so you don't need to write a bunch of <a> elements and many duplicate attributes.

For example a <custom-link> component:

<custom-link href="/message/inbox" class="list-group-item">
  Message
</custom-link>
<custom-link href="/message/review" class="list-group-item">
  Review
</custom-link>
<custom-link href="/message/resolution" class="list-group-item">
  Resolution
</custom-link>

If you don't need to reuse this component in other components or the list-group-item class is always necessary, you can also encapsulate this class to the <custom-link> . It will look even cleaner:

<custom-link href="/message/inbox">Message</custom-link>
<custom-link href="/message/review">Review</custom-link>
<custom-link href="/message/resolution">Resolution</custom-link>

the code of custom-link looks like:

<a
  :href="baseUrl + href"
  :class="{ active: isActive }"
  class="list-group-item"
>
  <slot></slot>
</a>

{
  props: ['href'],
  data: () => ({ baseUrl: window.Laravel.baseUrl }),
  computed: {
    isActive () {
      return location.href === this.baseUrl + this.href
    }
  }
}

I use location.href here directly, you can also use a computed property like Leo's example if you need some computations to get the current URL.