Vue.js使用VueRouter遇$attrs/$listeners只读警告问题求助

嘿，这个问题我之前帮好几个开发者踩过坑，其实根源大多是Vue或VueRouter被重复引入导致的组件实例冲突！下面给你一步步拆解解决方案：

为什么会出现这个警告？ #

当你的项目里同时通过两种方式引入Vue/VueRouter时（比如既用npm安装后在代码里import，又在HTML里用<script>标签引入CDN版本），就会生成两个不同的Vue实例环境。这时候嵌套组件（比如你这里的<RouterLink>嵌套在<SecondNav>里）就会在不同环境间传递属性，触发只读属性的警告。

具体解决步骤 #

• 检查入口HTML的全局引入
  打开你的项目入口HTML文件（比如public/index.html），看看有没有通过<script>标签引入Vue或VueRouter的CDN链接。如果有，同时你又在main.js里用import引入了这两个依赖，删掉HTML里的<script>引入，只保留npm安装的版本。

  举个要避免的反例：

  <!-- 不要同时存在下面的script和main.js里的import -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3/dist/vue-router.js"></script>
  

• 排查组件内的重复引入
  检查你的<SecondNav>和<Player>组件，有没有在组件内部重复import Vue或import VueRouter？如果有的话直接删掉，因为Vue和VueRouter已经在main.js里全局注册过了，不需要在组件内重复引入。

• 清理依赖缓存（可选）
  如果上面两步没解决，可能是依赖缓存导致的版本冲突。执行以下命令重置依赖：

  rm -rf node_modules
  npm cache clean --force
  npm install
  

• 检查webpack/vue-cli配置（进阶）
  如果你手动配置了webpack，确保Vue被设置为单例引入。比如在webpack.config.js里添加：

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
  

  用vue-cli的话，一般默认配置没问题，不用额外修改。

按照上面的步骤排查一遍，基本就能搞定这个警告啦！

内容的提问来源于stack exchange，提问作者Jaroslav Klimčík