[VUE | Inertia.js]Location route uri

[talelmishali]

Hey!

I am looking to pull a route URI to determine an active menu state. Is there an easy way to pull the URI from the route function?

My problem with route().current() is that I am using inertia and without a full page reload the current() function is not working as it is not reactive, maybe anyone has a simple solution that I am missing?

One way that just feels a bit hacky is:

<Link
                v-for="sub in item.subitems.data"
                :key="sub.name"
                :href="sub.href"
                :class="[
                    $page.url == `/${route().t.routes[sub.route].uri}`
                    .....

Another way when is just to share the route name with the default props.

My navigation structure in the nav component looks like that:

navigation: [
            {
                name: 'Dashboard',
                route: 'dashboard',
                href: route('dashboard'),
                icon: 'bar-chart-2',
                subitems: {
                    data: [
                        {
                            name: 'Activity',
                            route: 'dashboard.activity',
                            href: route('dashboard.activity'),
                            icon: 'activity',
                        },
                        {
                            name: 'Users',
                            route: 'dashboard.users',
                            href: route('dashboard.users'),
                            icon: 'user',
                        },
                    ],
                },
            },
            {
                name: 'Organizations',
                route: 'organizations',
                href: route('organizations'),
                icon: 'layers',
            },
        ],

[bakerkretzmar]

I've actually run into this same issue on client projects 😅 in the end I just left one reference to page.$url in the component so that it would re-render when that changed. You could also try putting it in a computed property or a watcher, or adding a listener to Inertia to update the 'current' route when navigation events happen.