Vuejs - Uncaught TypeError: Cannot redefine property: $router

Question

我是 Vuejs 的新手，一段时间以来一直遇到以下错误：（在页面加载时出现）

Uncaught TypeError: Cannot redefine property: $router
  at Function.defineProperty ()
  at Function.install (VM2179 vue-router.esm.js:526)
  at Function.Vue.use (vue.js:4738)
  at eval (VM2179 vue-router.esm.js:2447)
  at Object../node_modules/vue-router/dist/vue-router.esm.js (VM2105 app.js:1615)
  at __webpack_require__ (VM2105 app.js:712)
  at fn (VM2105 app.js:95)
  at eval (VM2178 index.js:3)
  at Object../src/router/index.js (VM2105 app.js:2415)
  at __webpack_require__ (VM2105 app.js:712)

这个问题似乎没有影响 web 应用程序的可用性，我很确定我没有多次声明 Vue.use（路由器）......

这是我的 index.js 文件：（在 src/router 中）

import Vue from 'vue'
import Router from 'vue-router'
import Blog from '../components/Blog.vue'
import BlogPost from '../components/BlogPost.vue'

Vue.use(Router)
Vue.config.silent = true

export default new Router({
  routes: [
    {
      path: '/blog',
      name: 'Blog',
      component: Blog
    },
    {
      path: '/blog/:slug',
      name: 'Blog-post',
      component: BlogPost
    }
  ]
})

app.ts：（在 src 中，主入口点）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/simple_store'
import '../assets/app.css'
import './assets/main_logo.css'
import './assets/pages/page_header_animation.css'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

请帮忙！谢谢！！

Answer 1

这是由于 following code 在 vue-router

if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter);
}

当您将文件包含在 <script> 块中（即没有构建系统）时，它实际上只存在。

删除与 Vue 或相关组件相关的所有 <script> 元素；使用 Webpack 时不需要它们。

Answer 2

已解决！

在我的 index.html 文件中，我再次导入了 vue：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Meko Deng</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
</body>
</html>

评论说出来了！

Answer 3

看起来你使用了 Webpack 而忘记了设置

externals: {
  Vue: 'vue'
}

在这种情况下，您已经在外部 CND 和 webpacks 的库中初始化了 vue 和 vue-router 两次。

Answer 4

如果您非常确定您没有使用下面这行代码两次。

Vue.use(VueRouter);

那么这是因为你添加了两次脚本。

<script src="{{ asset('js/app.js') }}" defer></script>

删除重复脚本，Laravel 默认情况下将此脚本标记添加到 app.blade.php 文件的头部部分

Vuejs - Uncaught TypeError: Cannot redefine property: $router

Vuejs - Uncaught TypeError: Cannot redefine property: $router

javascript

vue.js

vue-router

vuejs2