first of all, this is not bug, this is how other people's bootstrap is determined. Do you know what the focus status is? That's when you click the button, and when you don't click anywhere else, the button is focus status. The bootstrap defines the focus status of the component list-group-item , and does not determine the active status of the route activation you want. If you want this, you can consider defining the of vue-router , when your route matches the to attribute of your < router-link > . The class that you defined will be activated, and you can record the active button style defined as bootstrap , for example,

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Portal

is the reason for bootstrap, now the highlight of the link is controlled by bootstrap itself. This will not work

We need to control which link to highlight. We need to listen for changes in the route on the page, and then highlight the corresponding link button