[Vuejs]-Vue-route path comparison issus

by

0👍

✅

You didn’t use exact. exact match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation about exact.

So you have to change it into theses code lines:

<v-btn to="/test/111/mybox/222/333/444" exact> Manage </v-btn>

<v-btn to="/test/111/mybox/222/333/444/detail/1" exact> Detail </v-btn>

If you need use a custom active class, you can use exact-active-class. Example:

<v-btn to="/test/111/mybox/222/333/444/detail/1" exact exact-active-class="custom-active-class"> Detail </v-btn>

P/S: You’d better like use name instead of use full URL. <v-btn to="{ name: ''yourURLName }" exact exact-active-class="custom-active-class"> Detail </v-btn>

0👍

you can use router-link instade of <v-btn>
like this:

<router-link
:to="{
name: 'BoxManage',
params: {
        area: 'area of box',
        address: 'place of box' ,
        id: 77 ,
        box: 'value_of_box' ,
    }
}" 
class="some_class">Manage</router-link>

You can add any parameters as you want like this example ^_^

Leave a comment