基于VueJS vue-router实现Bootstrap垂直导航胶囊的技术问询

Got it, let's walk through how to adapt Bootstrap's vertical nav pills to a Vue + vue-router project step by step—this is something I’ve implemented plenty of times, so here’s what works smoothly:

First, let’s recap the original Bootstrap component you referenced:

Home Profile

The core changes involve swapping native <a> tags for Vue Router’s <router-link>, handling active state styling, and ditching Bootstrap’s native tab logic since vue-router will manage navigation.

Step 1: Replace <a> with <router-link> #

Swap each <a> tag for <router-link>, using the to attribute to specify your route path instead of href:

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <router-link 
    class="nav-link" 
    to="/home"
    role="tab"
  >Home</router-link>
  <router-link 
    class="nav-link" 
    to="/profile"
    role="tab"
  >Profile</router-link>
</div>

Step 2: Bind Bootstrap’s active class to router state #

<router-link> has an active-class property that lets you auto-apply Bootstrap’s active class when the route matches. We’ll also dynamically set aria-selected for accessibility:

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <router-link 
    class="nav-link" 
    active-class="active"
    to="/home"
    role="tab"
    :aria-selected="$route.path === '/home'"
  >Home</router-link>
  <router-link 
    class="nav-link" 
    active-class="active"
    to="/profile"
    role="tab"
    :aria-selected="$route.path === '/profile'"
  >Profile</router-link>
</div>

For routes with parameters (like /user/:id), use $route.name instead of path for more reliable matching:

<router-link 
  class="nav-link" 
  active-class="active"
  :to="{ name: 'UserProfile' }"
  role="tab"
  :aria-selected="$route.name === 'UserProfile'"
>Profile</router-link>

Step 3: Remove Bootstrap’s native tab logic #

Attributes like data-toggle="pill" and aria-controls are for Bootstrap’s JS tab plugin, which we don’t need here—vue-router handles page navigation now. Feel free to strip those out entirely.

Full Working Example #

Assuming your router config looks like this:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Profile from '../views/Profile.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  }
]

const router = new VueRouter({ routes })
export default router

Your final navigation component will be:

<template>
  <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <router-link 
      class="nav-link" 
      active-class="active"
      to="/home"
      role="tab"
      :aria-selected="$route.path === '/home'"
    >Home</router-link>
    <router-link 
      class="nav-link" 
      active-class="active"
      to="/profile"
      role="tab"
      :aria-selected="$route.path === '/profile'"
    >Profile</router-link>
  </div>
</template>

<script>
export default { name: 'VerticalNav' }
</script>

This setup keeps Bootstrap’s styling intact, uses vue-router for proper navigation, and maintains accessibility best practices.

内容的提问来源于stack exchange，提问作者margherita pizza