前端路由vue-router

说前端渲染之前要先说下后端渲染，早期的时候都是通过服务器渲染后直接发给浏览器，浏览器只收到html+css文件

 就相当于淘宝现在有三个页面，每次通过不同的url去向服务器发送请求的时候，服务器已经有对应的url的资源文件，渲染好了直接发给浏览器

就是服务器直接生成渲染好的html页面，返回给客户端进行展示

后端路由的缺点

后端路由的优点

 前后端分离阶段

 

 

1.输入url然后从静态服务器中拿到html,css,js文件 然后css，html文件浏览器可以帮我们渲染出来，

2.当js文件中有ajax异步请求的时候，通过api接口发送请求

3.服务器返回数据

单页面复应用阶段

 

 spa页面和就是利用前端路由，上面那种情况是静态资源服务器中存了每个url所对应的html，css,js文件，通过不同的url静态资源服务器就返回不同的文件，spa页面是静态资源服务器只有一套html，css，js文件他只要第一次访问的时候就会把这一整套html，css，js文件返回给浏览器，然后不同的url通过vue-router（前端路由）来给当前页面分发他指定的html，css，js文件，这样就不需要每次想跳转到不同的页面就要想静态资源服务器发送请求了

 那怎么样改变url页面不会发生刷新那？

1.通过href的方式，页面会发生刷新

2.通过hash的方式，页面不会发生刷新

 3.通过history的方式，页面也不会发生刷新

 history的方法

history.pushState()

history.back()

history.forward()

history.go()    这个方法可以向前或者向后例如go(1),go(-1)还可以go(-2)

history.replaceState()    这种方式就不能使用返回按钮了

history.go(-1),history.go(1)就相当于 history.back()和history.forward()

 安装和使用vue-router

 

 

先把router export出去，然后，把router挂在到vue实例当中

 这里import router from './router'相当于import router from './router./index'

 这个时候vue router还没用，我们要配置router信息

 

 现在我们创建两个组件home和about

 

 

在app.vue中跳转到home,和about组件通过router-link  他会被渲染成一个a标签，也可以用tag让他渲染成button标签，还有，默认是用的pushState，可以用replace改变

跳转之后的组件在router-view中渲染出来

被点击的按钮会给它自动赋上一个动态的class  router-link-active，如果我们不想改变这个class的名字不用router-link-active，

可以通过active-class修改，但如果这个时候有多个router-link想修改怎么办，到router的index文件中修改

 现在如果我们不想通过router-link来实现跳转怎么做呢

 

 在app.vue中的创建button标签，监听方法，通过this.$router.push来实现跳转，注意可能你会想到这里直接用history.push去修改为什么不可以，因为这种方式绕过了router，是不建议使用的

 重定向

当已进入首页的时候我就想让他选定渲染home组件怎么办，这个时候就使用重定向了

当path为空的时候，就会自动跳转到/home，然后渲染出home组件

默认的模式用的是hash模式，但是网页这里有#不好看，我们把他改成history模式

 动态路由

按照之前的方式创建一个组件user 然后首页给他一个router-link，到router的index中给它配置path

 但真实开发的时候这里的zhangsan应该是动态的所以修改成下面这种样子

 现在若果我的user.vue组件想用到这个userid信息怎么做呢？

这里的params.userid对应的是path中的userid，如果path中叫aaa，呢这里就用params.aaa

 路由懒加载

 本来router文件夹下的index文件把所有要用的组件代码都一次性全部请求过来了，现在用了懒加载只有通过路由访问到组件的时候，才会去加载相应的组件     

  

 最好把懒加载也写在一起，到时候方便管理

嵌套路由

 

 现在创建两个组件

 

 这里记得还要配置一下路由的懒加载

之前的router-view是用于展示之前跳转的组件的东西，他们和现在的homenews和homemessage不属于同一个级别，这次的router-view放在home.vue当中

 

 这里的路径要把之前的路径home/也配置上去，不然，到url上面现实的时候home不会显示在url上

 传参的方式

 之前我们用的就是params的方式进行传参的

接下来用query来进行传参

1.用router-link

 

 这个时候我们可以通过$route.query来获取数据

 2.通过代码的方式query传递

 

 导航守卫

 如果我们每次进入到一个组件的时候都想执行某件事情怎么办，这个时候我们可以去想要监听的组件下面的created方法实现你要做的事情，但是这样你需要把每个你想要监听的组件都加上created代码，这个时候就会很不方便，这个时候就可以使用导航守卫来帮我们实现

 这样每次进入你这个组件之前，他都会去执行这里的代码

还有一个后置守卫

 

 路由独享守卫

 keep-alive组件

当我们从一个组件1进入另一个组件2的时候，前面这个组件就会被销毁，我们下一次进入组件1的时候它是重新创建的，但我们这个时候想保留组件1中的状态的时候，就需要用到keep-alive组件了

 只有被keep-alive组件包起来的组件里使用activated和deactivated才有用

vue-router的内容就差不多了 - -，接下来可以看看运用vue-router做一个导航条了可以看我的另一篇文章

导航条tabbar的实现过程