项目05——Vue项目之页面跳转（路由）

任何一个应用一定会有页面跳转（切换），以前是用a标签来跳转的，但a标签会刷新页面，不能实现局部跳转。

在vue中，我们不会再使用a标签跳转了，vue提供了路由（router），他就是用来跳转页面的。router是vue的一个包，在创建项目的时候因为选上了路由，所以生成的项目文件里面默认就会有router的文件，且配置好了。我们使用的时候，直接新建页面然后写个路由规则就可以。router路由能够实现局部跳转且不刷新页面。

下面通过在项目中的一个例子来说明路由的用法（不举例子实在太难说明白）

我们创建好项目文件并且清空默认文件之后，在views文件夹里面新建三个页面，分别是aa，bb，cc三个页面，新建页面的时候，一个页面就是一个文件夹，且里面的文件都叫index.vue,为什么要这么写：因为这个页面里面可能还会有别的组件，这些别的组件还要放在本文件夹里面。index.vue意为每一个文件夹里面都应有一个根组件index.vue,而且写成index.vue,在被导入的时候可以省略文件名，直接写文件夹名字即可。

然后，在每一个页面里面写个文字用来区分组件哪个是哪个，注意，template标签下必须有且只有一个跟标签，这里是div标签，不写就报错，从这一点也可以看出，我们建的页面都是组件

现在要切换的页面就准备好了，此时打开项目啥也没有，因为页面创建好了，没有路由肯定不会显示，因为项目始终只显示App.vue这一个组件，那么我们就要通过路由把这三个页面让App.vue显示出来。

找到项目的路由文件（router下的index.js）,打开此文件，里面有一个routes的数组，在这个数组里面写路由规则，每一个路由规则都是一个对象，路由规则是什么：就是当路径为xx时显示xx组件，具体写法就是（这个写法只能记住）：

这句路由的意思是，当路径为/aa时，展示views文件夹下的aa组件。
注意：这个写法直接就带有路由懒加载的功能。
然后进入项目在地址栏加上/aa 查看,发现没有效果，因为路由是写好了，你没告诉他在哪里展示，那么在哪里展示？之前说过，App.vue是唯一显示的组件，肯定也只能在App.vue里面展示，展示如何写：写一个路由占位符router-view标签即可，这个标签就代表显示的组件内容（其实如果你不删除App.vue里面的默认代码，它本来就有路由占位符）

此时，进入浏览器在地址栏后面加上/aa 回车，aa组件就展示出来了

aa组件好了，那么其他的都一样了，在路由文件里面配置好路由规则即可。

然后在浏览器地址栏中加上/bb就显示bb组件，加上/cc就显示cc组件内容。
到此，页面路由就写好了，实现页面的跳转了。