Vuejs - 未捕获的类型错误:无法重新定义属性:$router



我对 Vuejs 比较陌生,我已经遇到以下错误一段时间了:(页面加载时出现(

未捕获的类型错误:无法重新定义属性$router:在 Function.install (VM2179 vue-router.esm.js:


526( 的 Function.defineProperty (( 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(
  

这个问题似乎不会影响网络应用程序的可用性,我很确定我没有多次声明 Vue.use(路由器(......

这是我的索引.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)
})

请帮忙! 谢谢!!

解决了!

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

注释掉了诀窍!

这是由于vue-router中的以下代码

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

这实际上只存在于您在<script>块中包含文件(即没有构建系统(时。

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

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

externals: {
Vue: 'vue'
}

在这种情况下,你在外部 CND 和 webpack 的库中初始化了两次 vue 和 vue-router。

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

Vue.use(VueRouter);

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

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

删除重复的脚本,Laravel默认在app.blade.php文件的head部分添加此脚本标签

最新更新