[Vuejs]-How to dynamically add an Id to the navbar used on laravel/VueJs SPA

by

0👍

Try checking window.location.href to get current route on mounted() state of your routes and add the css on that condition

0👍

You could pass a class as a prop with the route:

https://router.vuejs.org/guide/essentials/passing-props.html

0👍

You could just use the most simple solution. put the route name on the surrounding div and target it with css. e.g.

.home .navbar {}
.about .navbar {}

Or as you are using router view you can get the current route path in your nav bar component and use this to create a computed property to return the class you need.

<nav :class="['some','class', backgroundColor]"></nav>

...
computed: {
    backgroundColor() {
        switch (this.$route.fullPath) {
            case ('/'):
                return 'bg-blue';

            case ('/about'):
                return 'bg-pink';

            default:
                return 'bg-red';

        }
    }
},

Leave a comment