使用vue-router路由

通过使用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

发现多了一个<router-view>标签，这个标签是什么意思呢？我们在浏览器里打开这个页面，打开开发者工具，开一下他的源码

image.png

我们发现，Hello组件里的内容，被引入到了<router-view>的标签里了，哇！

---

试着创建自己的路由规则

• 刚刚太神奇了，那我们如果换一个组件呢？我们在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地址来访问不同的界面吧，我们需要在页面加入跳转的标签，就是<a>标签啦，那么在vue中，我们的<a>标签要怎么写呢？

我们先看看在html里的写法：

image.png

我们在公共部分写了两行字，用<router-link>标签括起来了，里面的属性有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

• 再看一下效果：

image.png

---

结束

var author = {
  name:'丁波',
  GitHub:'dingbo1028',
  University:'BNUZ'
}