NuxtJS集成Bootstrap后切换页面元素失效问题求助

你遇到的核心问题是Nuxt的客户端路由导航不会重新加载页面脚本，导致新渲染的DOM元素（比如仪表盘里的下拉菜单、滑块）没有被Bootstrap JS初始化——而刷新页面时是完整的页面加载，所有脚本重新执行，组件自然能正常工作。下面是具体的解决步骤：

1. 理解问题根源 #

Nuxt默认采用SPA模式（客户端路由），当你从登录页跳转到仪表盘时，页面不会完全刷新，只是替换了DOM内容。你在nuxt.config.ts里配置的script（jQuery、Bootstrap JS）只会在首次页面加载时执行一次，不会在路由切换后重新运行，因此新出现的Bootstrap组件没有被初始化。

2. 解决方案：路由切换后重新初始化Bootstrap组件 #

我们可以通过Nuxt的路由守卫，在每次路由切换完成后，重新初始化页面上的Bootstrap交互组件。具体操作如下：

步骤1：创建客户端专属插件 #

在项目的plugins目录下新建bootstrap.client.js文件（后缀.client.js确保只在客户端执行），内容如下：

export default ({ app }) => {
  // 监听路由切换完成事件
  app.router.afterEach(() => {
    // 延迟一小段时间，确保Nuxt已经完成DOM渲染
    setTimeout(() => {
      // 初始化Bootstrap下拉菜单
      $('[data-toggle="dropdown"]').dropdown();
      // 初始化滑块（如果是Bootstrap Carousel的话）
      $('.carousel').carousel();
      // 如果你还有其他Bootstrap组件，比如模态框、工具提示等，在这里添加对应的初始化代码
      // 示例：初始化工具提示
      $('[data-toggle="tooltip"]').tooltip();
    }, 100);
  });
};

如果你用的是Bootstrap 4+的原生JS（而非jQuery依赖版），可以替换成原生初始化方式，比如：

document.querySelectorAll('[data-toggle="dropdown"]').forEach(el => {
  new bootstrap.Dropdown(el);
});

步骤2：在Nuxt配置中注册插件 #

打开nuxt.config.ts，在plugins数组中添加这个插件：

export default {
  // ...其他配置
  plugins: [
    { src: '~/plugins/bootstrap.client.js', mode: 'client' }
  ],
  // ...其他配置
};

3. 额外处理：JSON警告问题 #

虽然你提到已经移除了相关代码，但Unexpected token o in JSON at position 1通常是因为把一个JS对象当成JSON字符串去解析（比如JSON.parse({ key: 'value' })，正确应该是先转成字符串JSON.parse(JSON.stringify({ key: 'value' }))）。建议：

• 清除浏览器缓存，确保旧代码被更新
• 检查项目中是否有第三方依赖或遗留的API请求、本地存储代码存在这个问题

这样处理后，每次路由切换到新页面时，Bootstrap的交互组件都会被重新初始化，就能正常工作了。

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