web-dev-qa-db-ja.com

Vuejs-キャッチされないTypeError：プロパティを再定義できません：$ router

私は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）
fn（VM2105 app.js：95）
評価時（VM2178 index.js：3）
Object ../ src/router/index.js（VM2105 app.js：2415）
__webpack_require __（VM2105 app.js：712）

この問題はウェブアプリのユーザビリティに影響を与えていないようで、Vue.use（Router）を2回以上宣言していないと確信しています…

これが私の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)
})

助けてください！ありがとうございました！！

javascriptvue.jsvuejs2vue-router
5
Meko Deng

これは、vue-routerの-​​ 次のコード が原因です。

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

これは、<script>ブロックにファイルを含める場合（つまり、ビルドシステムがない場合）にのみ存在します。

Vueまたは関連コンポーネントに関連する<script>要素をすべて削除します。Webpackを使用する場合は必要ありません。

1
Phil

解決しました！

私の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/[email protected]/dist/vue.js"></script> -->
</body>
</html>

コメントアウトすることでトリックができました！

7
Meko Deng

Webpackを使用していて、設定を忘れたようです

externals: {
  Vue: 'vue'
}

この場合、外部CNDとwebpacksのlibでvueとvue-routerを2回初期化しました。

1
Dmitriy Nazarov