通过使用Vue-router路由创建多组件的SPA。
项目初始化
- 创建带router的Vue项目 vue init webpack 项目名，在选择配件时，注意需要选择vue-router
image.png
- 其余选项均可以选择n
- 还是一样的cnpm install和运行cnpm run dev
- 看一下文件目录，发现多了一个文件，那就是src/router/index.js，这是我们vue-router的路由配置文件
image.png
- 我们打开看一下内容：
- image.png
我们发现他引用了vue-router插件，然后还引用了Hello组件，起名Hello，然后New了一个路由实例，定义了一个router数组，数组中有一个对象，有三个属性，分别是path路径、name路由别名，和component对应组件，这里的意思就是localhost:8080/地址对应的组件是Hello组件。
- 在看一下我们入口的main.js文件：
image.png
发现多了一个
标签，这个标签是什么意思呢？我们在浏览器里打开这个页面，打开开发者工具，开一下他的源码
image.png
我们发现，Hello组件里的内容，被引入到了
的标签里了，哇！
试着创建自己的路由规则
- 刚刚太神奇了，那我们如果换一个组件呢？我们在component中新建一个组件吧，就叫Haha
image.png
这里都是固定的写法哈，export default{}固定写法，name写组件的名字，一般与文加同名，data()是个函数，return用到的data对象啥的，都是基本语法哈哈。
- 然后我们要去路由配置文件里，修改我们的路由配置对不对啊。
image.png
- 先引入这个Haha组件，然后在路由对象中，改变相应的配置。
- 这时候我们再去localhost:8080/看看效果！
image.png
然而没有效果。
Emm。。。
我们检查一下代码
（检查中。。。）
啊，我们发信啊在Haha.vue,我们有个问题：
image.png
- 这个name，定义的是个字符串，我们没有加引号！
- 这个时候我们再来看看效果：
image.png
啊哈哈哈哈！！
- 那么，我是不是只能定义/路径下的页面呢？我们一个站点有很多页面的呢。回头想想我们在路由配置文件中，设定的router，是个数组，那就说明，我们可以定义多个路由页面的！（废话！），那么我们试着再定义一个路由规则：
image.png
然后我们去访问一下localhost:8080/和localhost:8080/haha:
image.png
你会发现，为啥我访问/haha，不能到我的页面呢？？我们在看看访问/页面：
image.png
- 我们发现，他在localhost:8080/后面，几个一个#/，那如果我在#/后加haha呢？
- image.png
- 哎嘿，出现了。
那么为啥在目录前面，都有一个#/呢？这个我也不太清楚哈哈哈哈，我估计这更ThinkPHP中index.php的效果差不多，这个我们后期也可以通过Apache或者Nignx的Rewirte给他去掉，这里先不管啦，大家记得有这么个东西就好啦。
跳转方法
- 那么我们总不能一直通过输入URL地址来访问不同的界面吧，我们需要在页面加入跳转的标签，就是
我们先看看在html里的写法：
image.png
我们在公共部分写了两行字，用
标签括起来了，里面的属性有to, 填写目标地址。 关于这个标签，可参考文档
这个标签还有很多用法，比如带参数，数据绑定，还可以绑定to，还可以在to里填写路由的命名和参数等。
编程式跳转
在js里，我们有href.location这种用法，那么我如果想在vue函数中跳转呢？比如我请请求某个数据，然后如果返回成功，我就跳转到某个页面。这里我们用按钮点击来模拟这个事件。
- 我们先设置两个按钮
- image.png
- 然后为这两个按钮绑定相应的methods
- image.png
image.png
- 然后我们编写这两个方法的内容，这里用到的是vue-router的编程式跳转，具体的文档戳这里
image.png
这里解释一下这个this.$router.push，文档上的用法是：
image.png
我看了文档，就直接写router.push，但是报错，说是没有import这个插件，我就很纳闷，然后在main.js引入了Vue-router插件，但是还是报错，然后突然想起来，这个push是router的方法，那么应该是要new这个方法的啊，然后在router/index.js中看到实例化了router 然后export出来，在在main.js里import 赋给了router变量，那么我在App.vue里，按照规范是应该在使用this.$router来调用的，这里是一个坑哦。
- 好了我们再来看看效果，发现点击按钮真的可以跳了呢！！
更复杂的尝试-多层嵌套路由
- 这时候，我们就要有更多的想法了，比如我有个二级导航如下
- 首页
- 人员管理
- 新增人员
- 人员列表
- 文章管理
- 那这样的一级导航如【首页】【人员管理】【文章管理】一般写在顶部，然后在对应的栏目，再显示二级目录，那么我们的路由又该怎么写呢？这就是我们后面要学习的多层嵌套路由！！！文档擢这里
- 我们首先需要新建好一些组件，我们新建人员管理组件、文章管理组件、新增人员组件和人员列表组件：
image.png
- 人员管理：
image.png
- 新增人员：
image.png
- 然后我们编写路由：
image.png
- 我们先写好了一级导航的路由，这时候我们去看看浏览器的效果呢：
image.png
image.png
image.png
- 这时候我们要来实现二级导航，这里就只做人员管理部分，文章部分同理可得的。
为了方便观看，我给二级内容加了红色的边框
- 我们先看一下在文档中，嵌套路由的写法：
image.png
可以看到，在对象中，加了一个children属性，在该属性中我们可以定义二级路由，我们现在来实现我们的人员管理的二级路由：
- 在路由配置中写：
image.png
- 在People.vue中的link中写路径：
image.png
- 我们注意到，这里的路径前面加了/，你可以试试不加/，或者不加people的情况下，url会有什么变化。
简单的active样式
- 那么如果我还想，在选中某个选项是，有对应的选中效果怎么办呢？我们可以给这个设置active的样式么？答案是肯定的，我们来看一下源码：
image.png
- 看到了么，router智能的给被选中的选项，赋予了router-link- active样式，我们可以在style标签里定义这个样式：
image.png
- 再看一下效果：
链接：https://www.jianshu.com/p/69292759948d
閱讀更多 im程序猿 的文章
