使用 vue-router 會出現“找不到元素#app”和“TypeError：無法讀取未定義的屬性‘匹配’”錯誤

Question

我正在嘗試使用 Vue.js 重新創建我之前使用 Scala Play 制作的前端應用程序（我想了解更多關於基於組件的網頁設計的信息）。

我為我制作的第一頁加載了一切，但我想實現路由，以便我可以擁有多個頁面（而不是只有一個大的單頁應用程序）。 我使用npm install vue-router --save了 vue-router，並嘗試遵循以下教程（使用我已經制作的組件）： https ://scotch.io/tutorials/how-to-build -a-simple-single-page-application-using-vue-2-part-1 。

據我所知，一切都應該順利加載，但沒有加載，我收到以下控制台錯誤：

[Vue warn]: Cannot find element: #app
[Vue warn]: Cannot find element: #app
[Vue warn]: Error in render: "TypeError: Cannot read property 'matched' of undefined"

found in

---> <App> at src/App.vue
       <Root>

TypeError: Cannot read property 'matched' of undefined
    at render (vue-router.esm.js?8c4f:76)
    at createFunctionalComponent (vue.runtime.esm.js?2b0e:3033)
    .... (etc)

我沒有粘貼完整的堆棧跟蹤，但如果需要可以這樣做。

我的代碼如下：

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import Home from './components/Home.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home }
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
}).$mount('#app')

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

應用程序.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
    background-color: aliceblue;
  }
</style>

組件/Home.vue

<template>
  <div id="app">
    <Header />
    <Posts v-bind:posts="posts" />
  </div>
</template>

<script>

import Posts from './Posts.vue'
import Header from './Header.vue'

export default {
  name: 'home',
  components: {
    Header, Posts
  },
  data() {
    return {
      posts: []
    }
  }
}
</script>

<style>
</style>

讓我知道我是否也需要包含 Header.vue 和 Posts.vue - 我已經省略了它們，因為在我嘗試使用 vue-router 之前它們渲染得很好。

如何擺脫這些控制台錯誤，以便在使用 vue-router 時正確呈現我的主頁？ 我已經四處搜索，到目前為止，我所有的搜索結果都讓我在“確保router是小寫的”（它是）、“確保routes是小寫的”（它是）和“使用import Vue from 'vue/dist/vue.js' "（沒用）。

Answer 1

關於原來的問題：

我相信您從評論討論中知道，錯誤[Vue warn]: Cannot find element: #app是因為兩個 Vue 實例被配置為在同一個根 DOM 節點#app上一個接一個地掛載。

第一個 Vue 實例掛載，並在此過程中將根 DOM 節點替換為在其自己的模板中定義的 HTML。 因此， #app根 DOM 節點不再存在，第二個 Vue 實例無法掛載，因為它找不到任何 id #app的 DOM 節點。

_{這意味着如果第一個 Vue 模板包含一個 ID #app的 DOM 節點，那么第二個 Vue 實例可能會掛載在那里，用它自己的替換第一個實例中的任何現有 HTML。}

通過刪除重復的 Vue 實例可以解決此錯誤。

---

關於您的后續問題：

我不知道為什么沒有所有el: '#app', template: '<App/>', components: { App }

首先要注意的是 Vue 實例屬性vm.$el和 Vue 實例方法vm.$mount()在大部分功能上是等效的——每個都允許你指定 Vue 實例將被掛載的根 DOM 元素。

主要區別在於它們的應用：

• 您使用vm.$el在實例創建時聲明根 DOM 節點。 但是，提供值不是強制性的，如果不提供，實例會在unmounted 狀態下創建。

• vm.$mount()允許您在實例化后為未安裝的實例指定根 DOM 節點。

如文檔中所述：

如果 Vue 實例在實例化時沒有收到 el 選項，它將處於“未安裝”狀態，沒有關聯的 DOM 元素。 vm.$mount() 可用於手動啟動未掛載的 Vue 實例的掛載。

當然，如果您在創建實例時使用vm.$mount()而不是vm.$el ，這在很大程度上取決於開發人員的喜好（盡管$mount()也接受各種輸入，因此存在其他細微差別）。 但是從您的問題的角度來看，沒有實際區別。

最后，Vue 的template屬性和render()方法只是定義 Vue 實例模板結構的兩種策略：

• template是更高級別的模板抽象，允許您定義字符串模板； eg: <div><App/></div>被 Vue 解析成一個結構，根據需要實例化任何子組件。

• render()是一種替代的、較低級別的模板抽象，它是模板的更接近編譯器的替代方案。 對於細粒度/編程用例或與其他模板語言（如 JSX 或原始 JS）一起使用，它更加靈活。

您的示例中主要的明顯區別是template使用<App/>組件定義了一個字符串模板。 Vue實例在解析這個模板字符串之前需要知道這個組件是什么，所以必須聲明為組件。

而render()允許直接傳遞App組件進行渲染，因此不需要定義template屬性或聲明任何組件。

我的觀點是前者更明確——這不是一件壞事——並且在聲明具有多個組件的結構時更具聲明性和可讀性。 為此，Vue 似乎推薦大多數使用的模板字符串。 也就是說，后一種方法也很簡潔，您經常會在安裝單個頂級入口點組件（例如： App ）的地方看到它。

_{另一個（隱式）策略是DOM 模板。 在沒有template屬性或render()方法的情況下，使用根 DOM 節點中定義的 HTML 結構——盡管通常不鼓勵這樣做。}

希望這可以幫助 ：）

Answer 2

我通過將 main.js 裁剪為僅包含一個new Vue部分來解決此問題，現在看起來像這樣：

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

我不知道為什么沒有所有的el: '#app', template: '<App/>', components: { App }東西，所以如果可以解釋，我會很感激 -我猶豫要不要添加答案，因為我不知道為什么會這樣； 如果有人添加了解釋它的答案，我很樂意接受（或者隨時用解釋編輯我的答案並將這一段刪掉）。

Answer 3

我發現這個問題可能會丟失

<div id="app"></div>

在 index.html 的正文中。