elementui的tree组件页面显示不出数据_vue路由及组件

继续搞Vuejs的前端，在之前我已经在Windows系统上配置好了一个初始的vue-cli页面，目前我需要做的工作，就是开始写代码，学习增删页面，加入输入框按钮什么的。另外希望能尽快学会如何通过API取数据，感觉上，能学会这些东西，就能达到一项技术2/8原则里边那个8了。

为了实现这个目的，我上网看了一系列的博客教程，照着抄了很多代码，最后都没办法用。我怀疑原因可能是大家用的版本不一样，感觉上Vue发展速度很快，导致的结果就是每个人写的风格都不一样，后来费了好大力，终于算是自己摸索出了一些结果。搞定了增删按钮以及页面跳转。

我们先回溯一下上一次的进度：刚刚使用vue-cli建立了一个项目，这个项目内似乎东西很多，但是我们只需要关注src文件夹下的东西就行了，运行npm run dev以后，浏览器会自动弹出一个页面，如下：

而目前的文件夹目录如下：

我们要做的，就是开始理解Vue增删页面的模式，组件和路由（就是网页链接URL）的跳转模式。

大致理解Vue设计思想

首先要理解的是vue的设计理念是怎样的？在我眼里，组件化是vue最为成功的一项涉及。组件化这个特性把一整个网站都打散成了很小的一个又一个部分。举个例子，看目前的目录下，有三个文件：整个项目目录下的index.htm，src目录下的App.vue，和components文件夹下的Hello.vue.

理解这三者的关系很重要，Index是一个最外层的网站框架，它其实什么都没有，有一个head，head里边可以定义一些CSS一类的，然后body部分完全是空的，它仅仅载入了一个名字叫做app的vue module.

所以说App.vue这个东西，就是嵌套在index.html中的。然后我们在看App.vue文件写了些什么？

1. // App.vue file
2. <template>
3. <div id="app">
4. <img src="./assets/logo.png">
5. <router-view></router-view>
6. </div>
7. </template>
8. <script>
9. export default {
10. name: 'app'
11. }
12. </script>
13. <style>
14. #app {
15. font-family: 'Avenir', Helvetica, Arial, sans-serif;
16. -webkit-font-smoothing: antialiased;
17. -moz-osx-font-smoothing: grayscale;
18. text-align: center;
19. color: #2c3e50;
20. margin-top: 60px;
21. }
22. </style>

额外说一句，vue文件都是这个模式，一共由三个部分构成：上边的<template>包含有最终用户看到的按钮框框；中间的 <script>定义了这个组件（module）所用到的数据和函数；后边的<style>定义了这个组件的样式等等。

所以我们暂时只关注最上边的<template>，其中只有两句代码比较核心：一行插入了一个图片，另一行写的是<router-view></router-view>。在这里，大概能猜到，App.vue里其实也差不多是空的，它只是给页面上添加了一个Logo而已，实质性的文章，都没有添加。那么我们看到的页面上的文字到底是哪里来的？它们全部在Hello.vue文件里。App.vue调用了Hello.vue这个组件，并将它显示在了Logo的下方，并且，是通过router来控制的显示，而不是直接插入组件。

最后，我们打开router文件夹下的index.js:

1. import Vue from 'vue'
2. import Router from 'vue-router'
3. import Hello from '@/components/Hello'
4. Vue.use(Router)
5. export default new Router({
6. routes: [
7. {
8. path: '/',
9. name: 'Hello',
10. component: Hello
11. }
12. ]
13. })

这个router文件是针对App.vue的路由，对应的内容，全部都会显示在刚才看到的那一行<router-view></router-view>中，在这里，App.vue会自动寻找这一些组件，比如，在目前的index.js中，path显示的是”/”对吧？这就意味着，当页面打开到App.vue，而没有增加其他的url后缀的时候 （http://localhost:8080/#/），App.vue会自动载入Hello这个组件，加载在那个Logo的下面。

如果还不能理解，下面我们做一个小实验：

你修改path的值为“/Hello”，那么你只有在（http://localhost:8080/#/Hello）才会重新看到刚才那个页面。而在（http://localhost:8080/#/）目录下，你会发现，只有一个logo，其他什么都没有。

稍微总结一下

1. 上述的小实验已经充分证明了，index.html, App.vue, Hello.vue之间的关系。一般来说，index.html是不用动的（顶多增加一些css头文件