【Vue16】路由

路由：就是根据网址的不同，返回不同的内容给用户

我是App.vue文件

显示的是当前路由地址所对应的内容

我就是当前的路由地址

当前的路由地址现在是localhost:8080/#/，也就是localhost下的根路径。它对应的内容是什么?为什么就对应这些根路径呢？
详情请看main.js，在入口文件内，引入了一个router变量，然后在创建根实例时，使用了router变量，（最下面的框表明的意思就是router: router，只不过在es6中，键值若相同，可省略一部分内容）

没错，就是我

这个router是啥？
它就是我们Vue项目的路由的配置内容。
这个router在我们./router文件夹下，这里会自动寻找router文件夹下的index.js文件。
打开router/index.js文件，

我就是index.js

这个文件最终导出去的就是路由配置项，在路由里有这样的配置，当访问根路径'/'时，根路径的路由对应的内容是HelloWorld，HelloWorld又来自哪里？来自第一个框框的import HelloWorld from '@/components/HelloWorld'，（@表示src目录）。
可以这样理解：
当用户访问根路径时，给用户展示的组件就是HelloWorld组件，在App.vue中写了，表示就是展示当前路径展示的内容也就是在index.js中配置的文件。
更通俗一点，在这里！（不代表所有，仅仅说在这里）

 == HelloWorld.vue
两者的内容相等

---

当我们写完一个组件之后，去@/router/index.js内，先用import引入组件，然后在routes中配置路由。

像这样配置路由

路由配置完之后，就可以根据路径的不同，访问不同的内容了。

根路径

home路径