VUE教程（第八节）

实在不抱歉，拖更很长时间，今天才有时间来续写vue基础教程，这次我们要写的是vue-router，也就是路由咯，以前我们开发多页时候的路由是通过a标签来做的，一般就是这么一种形式。我们用vue做单页的时候因为是单页，只有一个页面，所以一般都是用v-router来做模拟路由，这次我们要学习的主要是两个方面的内容，第一就是设定路由，第二就是子路由的设定，下一节我们会学习路由守卫和路由传值问题，争取把工作中会遇到的问题都说明白，说清楚，好了，我们开始学习吧：

我们在用vue-cli搭建项目时候，脚手架咨询过我们是否要选择v-router作为路由，不记得朋友可以看看之前的内容，在此就不重复说明了，现在我们看看我们现在的项目结构：

目录结构.png

可以看到在components目录下我建立了很多个文件，其中ly1到ly3是一级路由来用，zly1到zly3作为子路由来弄。router文件夹里面有个index.js文件，这个就是编写路由的js文件，路由的结构都在这里编写，现在我们看看路由的编写方式：

路由代码1.png

用import将文件引入到路由文件里面，然后在new出一个实例router，在里面的routes里面编写，它为一个数组，也就是相当于不同的路径，每个数组对象是一个对象类型，可以看到有三个属性，path、name、component，path是路径，也就是回头URL所要添加的路径。name是给这个路由文件取的名字，跳转路由可以直接使用名字作为跳转，最后一个component就是定义模板，也就是具体是调到哪个文件的意思，好的介绍完路由文件我们看看如何编写页面的代码：

路由代码2.png

我们用router-link组件来写跳转的路径，它在渲染时候会渲染成a标签，点击对应标签就会跳转到对应的页面，我们看看效果就明白了：

路由效果1.png

路由效果2.png

路由效果3.png

页面渲染出三个啊标签，当我们点击其中一个的时候，页面就直接跳到了对应的路由页面，这里我点击的是路由1，然后就跳转到了路由1页面，连接地址就变成了这么个，这样我们就做出了一个路由跳转的单页应用了，现在说说子路由跳转是什么个情况，我们都看过头部有个top，点击下面就是切换不同的内容，最简单的比如我们的微信，下面是不是有不同的菜单区，目前有四个，分别是微信、通讯录、发现、我，当你点击时候是不是会切换到不同的位置，这个用路由也是可以实现的，我们现在看看路由代码如何编写：

子路由代码1.png

同样的，我们用import将组件引入，然后在需要子路由的路由里面添加一个属性children，这就很明显了，这个就是，子路由咯，子路由的写法也和路由一致，我们用了三个参数，在此就不重复，我们再看看页面代码如何编写：

子路由代码2.png

我们同样定义出组件作为路由跳转链接，然后下面加了个，这是个啥呢？这就是渲染器，也就是但你点击上面路由的时候，对应的页面会渲染到这个标签里面，我们来看看效果先：

子路由效果1.png

子路由效果2.png

但我们点击子路由1时候，下面就渲染出来子路由页面的内容，同时链接也在尾部加上了对应的路由路径是在父路由基础上添加的，因为我在编写子路由时候的父路由路径是/，所以这里看不出来，特此说明一下，防止误会。对于路由的编写还是很简单的，下一节我们深入一下，说说路由守卫和传值吧，这个其实也不是很难，而且在项目中基本会用到的，这节就这样，谢谢各位大佬的观看，期待下一节与你见面。

微信公众号