How listen to the changes of route link in inertia js?

[jeanali]

I have these links:

<li class="relative px-4 py-2 mt-1">
    <span
      class="absolute inset-y-0 left-0 rtl:right-0 w-1 bg-indigo-600 rounded"
      v-if="route.current('home')">
    </span>

    <inertia-link
      class="inline-flex items-center text-lg w-full text-gray-300 hover:text-gray-400"
      :href="route('home')"
    >
       <span class="ml-4 rtl:mr-4">Home</span>
    </inertia-link>
</li>

<li class="relative px-4 py-2 mt-1">
    <span
       class="absolute inset-y-0 left-0 rtl:right-0 w-1 bg-indigo-600 rounded"
       v-if="route.current('products.index')"
    ></span>

    <inertia-link
      class="inline-flex items-center text-lg w-full text-gray-300 hover:text-gray-400"
      :href="route('products.index')"
    >
    <span class="ml-4 rtl:mr-4">Home</span>
    </inertia-link>
</li>

The span is vertical line to just the route is active.

The problem is that when switch between routes the active does not work unless I refresh the page! How can check if the route shows the line and when I go to another one hide previous one ?

[ajnsn]

@jeanali If using Ziggy, are you sure it's route.current('products.index')?
According to Ziggy's docs to should be like this: route().current('products.index')?
Which Vue version are you using, 2 or 3?

[jonagoldman]

The issue seems to be that both route() and current() are a functions called only once. The first returns the route name as a string and the second a boolean.

To fix this issue I added a watcher for this.$page.url that calls this.route().current('foo') when the url changes.

<script>
export default {
  data() {
    return {
      active: this.isCurrent(),
    }
  },
  methods: {
    isCurrent() {
      return this.route().current(this.href) // custom prop from a parent component
    },
  },
  computed: {
    url() {
      return this.$page.url
    },
  },
  watch: {
    url() {
      this.active = this.isCurrent()
    },
  },
}
</script>

There might be a better way to do it but it works.

[ajnsn]

I encountered this issue in Vue 2 as well. My solution worked without a watcher just by assigning/evaluating the $page.url

methods: {
    isActive(route) {
        const url = this.$page.url; // ziggy "reactive" helper

        return this.route().current(route);
    },
},

In the last Vue 3 based projects the following works out of the box.

methods: {
    isActive(route) {
        return this.route().current(route);
    },
},

[reinink]

I personally don't use the Ziggy current() method, but instead have a method to check active state, which you can see here:

https://github.com/inertiajs/pingcrm/blob/eb00e058d2718909a21b27efc83d714cabc937dd/resources/js/Shared/MainMenu.vue#L39

This uses $page.url to do this check. 👍

[alancwoo]

I was having this issue with inertia 1.0 and Vue3 with script setup and managed to do something like this:

const example = computed(() => {
  if (usePage().url === '/') {
     ...
   } ...
}

The confusion I had faced was setting a constant like const page = usePage() and watching for changes in page which didn't seem to work.