Javascript 使用vue路由器会给出；找不到元素“app”；及；TypeError:无法读取属性'；匹配'；“未定义”的定义；错误

我正在尝试使用Vue.js重新创建我以前使用Scala Play制作的前端应用程序（我想了解更多关于基于组件的web设计的信息）

对于我制作的第一个页面，我可以很好地加载所有内容，但是我想实现路由，这样我就可以有多个页面（而不仅仅是一个大的单页面应用程序）。我使用

npm安装vue路由器--save

安装了vue路由器，并尝试遵循以下教程（使用我已经制作的组件）：

据我所知，所有内容都应该顺利加载，但没有加载任何内容，因此出现以下控制台错误：

[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)

[Vue warn]：找不到元素：#app
[Vue warn]：找不到元素：#应用程序
[Vue warn]：呈现错误：“TypeError:无法读取未定义的属性“matched”
发现于
--->在src/App.vue
TypeError:无法读取未定义的属性“matched”
在渲染时（vue router.esm.js？8c4f:76）
在createFunctionalComponent上（vue.runtime.esm.js？2b0e:3033）
.... （等）

我还没有粘贴完整的堆栈跟踪，但可以在需要时粘贴

我的代码如下：

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”导入Vue
从“./App.vue”导入应用程序
从“vue路由器”导入VueRouter
从“./components/Home.vue”导入主页
Vue.use（VueRouter）
常数路由=[
{path:'/'，组件：Home}
]
常量路由器=新的VueRouter({
路线
})
新Vue({
el:“#应用程序”，
模板：“”，
组件：{App}，
路由器
}).$mount（“#应用程序”）
Vue.config.productionTip=false
新Vue({
渲染：h=>h（应用程序），
}).$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>

<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>

导出默认值{
名称：“应用程序”
}
* {
框大小：边框框；
保证金：0；
填充：0；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
线高：1.4；
背景色：aliceblue；
}

组件/Home.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>

<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>

从“/Posts.vue”导入帖子
从“./Header.vue”导入标头
导出默认值{
姓名：'家'，
组成部分：{
标题、职位
},
数据（）{
返回{
员额：[]
}
}
}

如果我也需要包含Header.vue和Posts.vue，请告诉我-我省略了它们，因为在我尝试使用vue路由器之前，它们的渲染效果很好

---

如何消除这些控制台错误，以便在使用vue路由器时正确呈现主页？我已经到处搜索过了，到目前为止，我所有的搜索结果都让我找到了“确保<代码>路由器<代码>是小写的”（它是），“确保<代码>路由<代码>是小写的”（它是），以及“使用<代码>从'Vue/dist/Vue.js'导入Vue”（不起作用）.

我通过将main.js裁剪为只包含一个

新Vue

部分，解决了这个问题，该部分现在如下所示：

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

---

如果没有所有的

el:'#app'，模板：''，组件：{app}

之类的东西，我一点也不知道为什么会这样，所以如果可以解释的话，我会很感激的-我不知道为什么会这样做，所以我很犹豫是否要添加一个答案；如果有人添加了一个解释，我很乐意接受（或者可以随意编辑我的解释，并删掉这一段）。

关于原版：

我确信您从评论讨论中了解到，由于将两个Vue实例配置为在同一根DOM节点

#app

上依次装载，因此会出现错误

[Vue warn]：找不到元素：#app

第一个Vue实例装载，并在装载过程中，使用在其自己的模板中定义的HTML替换根DOM节点。因此，

#app

根DOM节点不再存在，第二个Vue实例无法装载，因为它找不到id为

#app

的DOM节点

这意味着，如果第一个Vue模板包含id为

#app

的DOM节点，则第二个Vue实例可能会挂载在那里，用自己的HTML替换第一个实例中的任何现有HTML

通过删除重复的Vue实例，可以解决此错误

---

关于你的后续问题：

我完全不知道为什么没有所有的

el:'#app'，template:'和Vue实例方法在功能上都是等效的，它们都允许您指定安装Vue实例的根DOM元素

主要区别在于它们的应用：


您可以使用
vm.$el
在实例创建时声明根DOM节点。但是，提供值不是必须的，如果不提供，则实例将在未装载状态下创建

vm.$mount（）
允许您在实例化后为未装载的实例指定根DOM节点


如文件所述：

如果Vue实例在实例化时没有收到el选项，它将处于“未装载”状态，没有关联的DOM元素。vm.$mount（）可用于手动开始装载未装载的Vue实例

当然，如果在创建实例时使用
vm.$mount（）
而不是
vm.$el
，这在很大程度上取决于开发人员的喜好（尽管
$mount（）
也接受各种输入，因此还有其他细微差别）。但是从你的问题来看，没有实际的区别

最后，Vue的
template
属性和
render（）
方法只是定义Vue实例模板结构的两种策略：


template
是更高级别的模板抽象，允许您定义字符串模板；e、 g:
。对于更细粒度/编程的用例或与其他模板语言（如JSX或raw JS）一起使用，它更灵活


主要的明显区别