导航栏中的菜单栏切换处于活动状态

Question

我正在尝试在导航栏中切换激活的按下元素，但目前无法正常工作。 这是导航栏的代码：

    <nav class="navbar fixed-bottom navbar-expand-lg navbar-dark bg-dark d-block d-sm-none">
        <div class="navbar-expand" id="navbarNav">
            <ul class="navbar-nav flex-row ml-auto justify-content-between">
                @auth
                    @if(Auth::user()->can('scan qr'))
                        <li class="nav-item {{ Route::currentRouteName() == 'scan-qr'  ? 'active' : '' }}">
                            <a class="nav-link" href="{{ route('scan-qr') }}">Scan {!! Route::currentRouteName() == 'scan-qr'  ? '<span class="sr-only">(current)</span>' : '' !!}</a>
                        </li>
                    @endif
                    @if(Auth::user()->can('create qr'))
                        <li class="nav-item {{ Route::currentRouteName() == 'create-qr'  ? 'active' : '' }}">
                            <a class="nav-link" href="{{ route('create-qr') }}">Create {!! Route::currentRouteName() == 'create-qr'  ? '<span class="sr-only">(current)</span>' : '' !!}</a>
                        </li>
                    @endif
                    <li class="nav-item {{ Route::currentRouteName() == '#'  ? 'active' : '' }}">
                        <a class="nav-link" href="#">Attendance</a>
                    </li>
                    <li class="nav-item {{ Route::currentRouteName() == 'logout'  ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</a>
                    </li>
                @else
                    <li class="nav-item {{ Route::currentRouteName() == 'login'  ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('login') }}">Login {!! Route::currentRouteName() == 'login'  ? '<span class="sr-only">(current)</span>' : '' !!}</a>
                    </li>
                    <li class="nav-item {{ Route::currentRouteName() == 'register'  ? 'active' : '' }}">
                        <a class="nav-link" href="{{ route('register') }}">Register {!! Route::currentRouteName() == 'register'  ? '<span class="sr-only">(current)</span>' : '' !!}</a>
                    </li>
                @endauth
            </ul>
        </div>
    </nav>

此刻我正在使用带有vue的php，并尝试了一些方法，但是它们没有用。希望对这个问题有一个简单的解决方案。