至此基本上vue2.0的内容全部结束  
  
  
  
  
  
 ，后面还有点elementUI和vue3.0的内容过几天再来更新             。

这几天要回学校去参加毕业答辩 
  
  
  
  
  
  ，断更几天

一.相关理解

是vue的一个插件库


 


 


 


 


 


 

，专门用来实现spa（单页面应用）的 
 
 
 
 
 
，也就是一直都是一个index.html页面  
   
   
   
   
   
   ，他有他的导航区和展示区

 

 

 

 

 

 
，虽然只有一个页面但是我点击导航区
 

 

 

 

 

 

，展示区会出来不同内容             ，页面也不会刷新也不会发生跳转
 

 
 

 
 

 
 

 
 

 
 

 
 ，照样可以实现丰富的页面展现

在前端里面的路由












，我们的路径就好比key值                   ，value值就是我们的组件
 
 
 
 
 
 
 
 
 
 
 
 
 ，vuerouter检测到你的key为这个就会帮你去呈现对应的value

前端路由是组件


















，后端路由是函数（参考前面node.js）

二.基本路由

先完成一个简单的静态页面搭建

导航区已就位             ，下面就是分组件
 
  
 
  
 
  
 
  
 
  
 
  
 ，把我们展示区的内容放到组件里面去

要注意的是












，app里面只是把展示区的内容占位  
  
  
  
  
  
 ，其他地方不要动

接下来就要发挥路由的作用了 
  
  
  
  
  
  ，下载导入注册

然后vm配置项一个全新的配置 router


 


 


 


 


 


 

，但是在配置之前需要像vuex一样先创建一个router文件夹里面放入我们的index.js文件 
 
 
 
 
 
，来创建一个路由器  
   
   
   
   
   
   ，专门拿来创建整个网页的路由器

 

 

 

 

 

 
，new出来一个路由器过后
 

 

 

 

 

 

，我们说一个路由器是管理着多个路由的             ，所以多个路由直接来个routes
 

 
 

 
 

 
 

 
 

 
 

 
 ，路由又是由key  
  
  
  
  
  
 、value组合的












，每个路由都是一个配置项                   ，在里面写入键值对

这样才可以回去配置我们的配置项router

当我们配置好后
 
 
 
 
 
 
 
 
 
 
 
 
 ，路径就会出现一个#

我们原来实现跳转靠的是一个a标签


















，但是要用路由实现跳转             ，需要用到一个特定的标签 router-link
 
  
 
  
 
  
 
  
 
  
 
  
 ，并且我们的href也就是要跳转的目标也要改为 to












，而且里面的值不是我们的链接不是我们的目标网页  
  
  
  
  
  
 ，是我们在url地址中的路径名 
  
  
  
  
  
  ，所以要记住这里没有./因为不是一个文件

而且你会发现使用了这个最终样式


 


 


 


 


 


 

，原来给a写的样式还是有 
 
 
 
 
 
，因为我们的router-link在页面上呈现后就变成了a标签

这个时候active就不能写死了  
   
   
   
   
   
   ，用到一个规定的属性 active-class

 

 

 

 

 

 
，就可以根据我们点的谁active就给谁

最后一步
 

 

 

 

 

 

，通过标签router-view指定我们的展示区标签放的位置

1.注意点

可以发现我们放在router管理的组件并没有引入到父组件使用也没有用组件标签             ，而是通过定义了路由匹配规则后
 

 
 

 
 

 
 

 
 

 
 

 
 ，让他帮我们展现的












，一般像这样的组件 叫做路由组件                   ，而且一般是放在一个pages的文件夹下的
 
 
 
 
 
 
 
 
 
 
 
 
 ，我们的要导入要写组件标签的叫做一般组件是放在components里面的

当我们点击一个组件


















，另一个组件是被销毁了

每个路由组件多了两个api             ，一个是$route,一个是$router
 
  
 
  
 
  
 
  
 
  
 
  
 ，值得注意的是












，route是每个vc独有的里面的数据是独有的  
  
  
  
  
  
 ，但是router是共有的 
  
  
  
  
  
  ，你配置多少个路由都只有这一个router

三.嵌套路由

路由里面再来一个路由

由于是home里面的嵌套路由


 


 


 


 


 


 

，所以要把代码放到home里面去再进行拆分

可以看出来再分两个news和message组件

主要看一下怎么来配置路由 
 
 
 
 
 
，我们刚才配的都叫一级路由  
   
   
   
   
   
   ，如果是路由下的嵌套路由那就是二级路由了

 

 

 

 

 

 
，所以应该在这个路由里面来配置
 

 

 

 

 

 

，一个全新的配置项 children而且是一个数组             ，里面写我们的每个路由
 

 
 

 
 

 
 

 
 

 
 

 
 ，这里要注意 二级路由之后就不用再带/因为vue帮你解析的时候会给你自动加上

注意二级路由的router-link标签里面的to这个设置












，需要连同父级地址写完

四.路由传参（query）

接着前面的例子                   ，假如我message列表里面每个数据都是ajax得到的
 
 
 
 
 
 
 
 
 
 
 
 
 ，然后都可以点击


















，没点一个又在下面呈现一些不同的内容

其实这里又涉及到嵌套路由了             ，继续往每一个message添加路由
 
  
 
  
 
  
 
  
 
  
 
  
 ，点击这个出现那个












，点击这个出现这个其他都销毁  
  
  
  
  
  
 ，其实没得这么麻烦 
  
  
  
  
  
  ，这里就定义一个组件就可以搞定

创建了下面的一个组件后


 


 


 


 


 


 

，开始定义路由规则 
 
 
 
 
 
，三级路由出现  
   
   
   
   
   
   ，只定义一个即可

万事俱备就差传参

其实这个参数就在我们的$route身上

 

 

 

 

 

 
，它上面有一个query专门处理查询字符串的参数的
 

 

 

 

 

 

，为什么就能确定是传给我的参数？因为当我们点击了这个之后             ，他才会呈现他才会有vc实例对象
 

 
 

 
 

 
 

 
 

 
 

 
 ，其他的都被销毁了












，所以在我们detail组件就可以把值拿到

那么这个值怎么传过来？

两种写法：字符串写法

对象写法

五.命名路由

可以简化路由的跳转

在我们定义路由的地方给路由取名字                   ，我给我下面的三级路由来个name

我们以前写了这么大一串的路径
 
 
 
 
 
 
 
 
 
 
 
 
 ，可以直接写name配置项


















，值为刚才写的name             ，只能写在对象写法里面

六.路由传参（params）

如果要使用动态传参
 
  
 
  
 
  
 
  
 
  
 
  
 ，首先要对路由对于路径的监测机制做修改

然后我们在接受参数这里也要改为params

最后最大的改变就是我们传进来参数的形式不再是查询字符串了












，而是这种类似于在后面还有路径的形式  
  
  
  
  
  
 ，但是这并不是路径只是参数

当然对象形式也是可以的 
  
  
  
  
  
  ，注意：如果带的是params参数


 


 


 


 


 


 

，这里只能写name路径 
 
 
 
 
 
，不能写path路径

七.路由的props配置

跟我们组件的props一样也有三种写法

方法一：写在路由中的对象  
   
   
   
   
   
   ，路由中的全新配置项props

 

 

 

 

 

 
，这里传的值就是直接给这个路由的组件

对应的detail组件通过props来接受

但是这种方法使用极少
 

 

 

 

 

 

，因为只能传死数据

方法二：写为一个布尔值             ，他的意思就是会把这个路由组件收到的所有params参数以props形式给到这个组件

局限性就是只支持params

方法三：为一个函数
 

 
 

 
 

 
 

 
 

 
 

 
 ，参数可以拿到$route,靠的就是这个返回值

八.router-link的replace属性

我们浏览器对于历史记录的保存是存在一个栈里面












，然后router-link的的操作模式就是push模式                   ，就是一直往栈里面压
 
 
 
 
 
 
 
 
 
 
 
 
 ，也叫压栈


















，所以当我们当一次后退             ，指针就会回退一次也就是那个箭头

我们router-link默认开启的就是push模式
 
  
 
  
 
  
 
  
 
  
 
  
 ，我们还有一种模式叫做replace模式












，就是点击一次前一次记录就被销毁了  
  
  
  
  
  
 ，所以一直存起的就这一次

如何开启replace

直接给router-link标签写一个属性replace

这里有一个易错点 
  
  
  
  
  
  ，加入我给news和message开启了replace


 


 


 


 


 


 

，其他都是push当我依次点击About 
  
  
  
  
  
  、Home


 


 


 


 


 


 

、news和message 
 
 
 
 
 
，主要是replace和push交叉哪一步  
   
   
   
   
   
   ，当我们点击news时

 

 

 

 

 

 
，会干掉前面这一条记录
 

 

 

 

 

 

，所以我们的home这条记录就没得了             ，点击后退直接回到about这一步

九.编程式路由导航

这个技术是拿来弥补router-link的短缺
 

 
 

 
 

 
 

 
 

 
 

 
 ，因为她在页面上去了最终呈现的是一个a标签












，那万一我要实现跳转的不是a标签是其他标签呢？

我们的router-link是帮我们实现跳转的功能也就是导航区这一片功能

要实现这个功能需要用到我们$router路由器上面的一个api push

里面写的是一个对象                   ，很幸运的是
 
 
 
 
 
 
 
 
 
 
 
 
 ，这里的配置项跟我们的to的对象形式是一样的


















，拿下来就没有参数了             ，记得传参

1.按钮实现前进后退

window上面有
 
  
 
  
 
  
 
  
 
  
 
  
 ，但是我们这里要用路由实现












，$router下面有两个api一个是back  
  
  
  
  
  
 ，一个是forward

这上面还有一个api go 
  
  
  
  
  
  ，要传入一个数组如果是正数


 


 


 


 


 


 

，就表示前进n部 
 
 
 
 
 
，负数表示后退n步