Vuejs - Uncaught TypeError: Невозможно переопределить свойство: $ router - PullRequest
Новая
       16

Vuejs - Uncaught TypeError: Невозможно переопределить свойство: $ router

0 голосов
/ 06 сентября 2018

Я относительно новичок в Vuejs и на некоторое время застрял со следующей ошибкой: (появляется при загрузке страницы)

Uncaught TypeError: Невозможно переопределить свойство: $ 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)
в фн (VM2105 app.js: 95)
в eval (VM2178 index.js: 3)
в объекте ../ src / router / index.js (VM2105 app.js: 2415)
в __webpack_require__ (VM2105 app.js: 712)

Эта проблема, похоже, не влияет на удобство использования веб-приложения, и я уверен, что не буду объявлять 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)
})

Пожалуйста, помогите! Спасибо !!

Ответы [ 3 ]

0 голосов
/ 07 сентября 2018

Решено!

В моем файле 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>

Комментируя, что сделал свое дело!

0 голосов
/ 26 февраля 2019

Похоже, вы использовали Webpack и забыли установить 

externals: {
  Vue: 'vue'
}

В этом случае вы дважды инициализировали vue и vue-router во внешней CND и в библиотеке webpacks.

0 голосов
/ 07 сентября 2018

Это связано с следующим кодом в vue-router

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

, который действительно присутствует только тогда, когда вы включаете файлы в блоки <script> (т. Е. Без системы сборки).

Удалить все <script> элементы, относящиеся к Vue или связанным компонентам; они вам не нужны при использовании Webpack.

...