Vuejs - 未捕获的类型错误：无法重新定义属性：$router
Posted
技术标签:
【中文标题】Vuejs - 未捕获的类型错误：无法重新定义属性：$router【英文标题】：Vuejs - Uncaught TypeError: Cannot redefine property: $router 【发布时间】：2019-02-12 01:12:45 【问题描述】：我对 Vuejs 比较陌生，并且我已经被以下错误困扰了一段时间：（在页面加载时出现）
未捕获的类型错误：无法重新定义属性：$router 在 Function.defineProperty() 在 Function.install (VM2179 vue-router.esm.js:526) 在 Function.Vue.use (vue.js:4738) 在 eval (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) 在 eval (VM2178 index.js:3) 在 Object../src/router/index.js (VM2105 app.js:2415) 在 __webpack_require__ (VM2105 app.js:712)
这个问题似乎并没有影响 webapp 的可用性，而且我很确定我没有多次声明 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)
)
请帮忙！ 谢谢！！
【问题讨论】：
可能是您的应用在同一页面上加载了两次？ 我同意，在你的 main.js 中导入路由器，例如“从'./router'导入路由器”，但不在你的 app.ts 文件中。 在我看来app.ts 是主要的 js 文件。我还假设您提到的index.js 文件是./router/index.js，对吗？
嗨 @Daniel 是的 app.ts 是主 js 文件，index.js 在 ./router/index.js 中
@Phil 哦！我现在看到了，我确实以某种方式将<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 包含在我的index.html 文件中......这就是问题所在。谢谢！！
【参考方案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>
注释掉就行了！
【讨论】：
忘记注释了，直接删除 :D 是的，是的~~再次感谢！！【参考方案2】：这是由于vue-router 中的following code
if (inBrowser && window.Vue)
window.Vue.use(VueRouter);
仅当您将文件包含在 <script> 块中时才会出现（即，没有构建系统）。
删除任何与 Vue 或相关组件相关的 <script> 元素；使用 Webpack 时不需要它们。
【讨论】：
如果为了让外部脚本使用 Vue 而将 vue 暴露在窗口中会怎样？【参考方案3】：看起来你使用了 Webpack 并且忘记了 set
externals:
Vue: 'vue'
在这种情况下，您已经在外部 CND 和 webpacks 的 lib 中初始化了两次 vue 和 vue-router。
【讨论】：
谢谢！哇，太神奇了，我对 webpack 的externals 及其作用的了解非常有限，因此我一直不太明白为什么我会收到与这个单一设置相关的错误。【参考方案4】：
如果您很确定您没有使用以下行两次。
Vue.use(VueRouter);
然后发生这种情况是因为您添加了两次脚本。
<script src=" asset('js/app.js') " defer></script>
删除重复的脚本，Laravel 默认在 app.blade.php 文件的 head 部分添加这个脚本标签
【讨论】：
以上是关于Vuejs - 未捕获的类型错误：无法重新定义属性：$router的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取 VueJs 中未定义的属性“get”
VueJS 3 / 路由器 / 带有推送的重定向：未捕获（承诺中）类型错误：无法读取未定义的属性（读取“推送”）