Question

我是Vuejs的新手，并且一段时间以来一直遇到以下错误：（页面加载时显示）

未捕获的TypeError：无法重新定义属性：$ router
          在Function.defineProperty（）
          在Function.install（VM2179 vue-router.esm.js：526）
          在Function.Vue.use（vue.js：4738）
          在评估时（VM2179 vue-router.esm.js：2447）
          在Object ../ node_modules / vue-router / dist / vue-router.esm.js（VM2105 app.js：1615）
          在__webpack_require__（VM2105 app.js：712）
          在fn（VM2105 app.js：95）
          在评估时（VM2178 index.js：3）
          在Object ../ src / router / index.js（VM2105 app.js：2415）
          __webpack_require__（VM2105 app.js：712）

这个问题似乎并没有影响Web应用程序的可用性，我敢肯定我不会多次声明Vue.use（Router）…

这是我的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

解决了！

在我的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 2

看起来您使用过Webpack并忘记了设置

externals: {
  Vue: 'vue'
}

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

Answer 3

这是由于vue-router中的following code

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

仅当您将文件包含在<script>块中（即，没有构建系统）时，该选项才真正出现。

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

Answer 4

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

Vue.use(VueRouter);

然后发生这种情况是因为您添加了两次脚本。

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

去除重复的脚本，Laravel 默认在 app.blade.php 文件的 head 部分添加这个脚本标签

Vuejs-未捕获的TypeError：无法重新定义属性：$ router

4 个答案: