Vue的路由管理

VUE的路由管理

路由：根据不同的路径信息显示不同的页面

路由有两种模式：一个是history模式，一个是非history模式，如果是history模式，最终部署到后端时，不管什么页面最终都要返回首页给它，如果是非history模式则后端完全不需要处理

写了history模式后端要做操作处理，如果是非的话则不需要处理。

 

history模式：为什么后端要做处理，因为你访问路径如下，用户把连接保存起来，用户发送第一个请求路径时，带有about路径，如果后端不做操作，直接请求about页面，后端始终返回首页，最终前端会根据路径信息渲染页面

 

非history模式，hash模式，多了一个#号，不会进行页面的跳转，如a标签，井号只会在页面内部进行跳转，后面这个处理是前端的处理，所以访问的始终是首页

结构：在main中导入了路由，在实例化VUE的时候把它导入进来就可以了

 

router里的index.js

history的，需要配置mode为history,

 

开始

router-link to 相当于一个a标签，与a标签不同的是会添加相应的样式，随便在一个vue组件输出this后，go:前进后退

 

函数式编程：

比如经过一系列处理。点击跳转到另一个页面

动态路由

把输入的内容获取到以后，再根据这些内容显示相应的信息，如天气的组件

@代表src的路径下，通过输入的城市做ajax请求，把内容渲染到我们的页面上

下面输入guangzhou/zengcheng,area就是zengceng

 

同时我们可以用watch去监听$router的变化，不如在APP.vue上做一个监听，路由发生改变了就打印信息

 

嵌套路由

就是路由里面还有路由，鼠标里面会显示不同子组件的内容，根据不同的内容显示就是一个嵌套路由，就是在路由里面再写一个子路由

这里router-view就是专门用于子路由的显示

编程式导航

通过点击事件进入news页面，通过路径进行跳转

通过名字进行跳转，用params完成名字的动态路由设置，路径跳转也可以设置

 

如果要传入参数，有两种写法

现在用push的时候页面是可以前进和后退的，

但是用replace替换就不可以了，replace会有一个回调函数

前进后退

 

命名视图

 

比如我们首页有好几个routerview，有多个视图可以通过这个命名视图完成

 

 

重定向和别名

下面/a是瞎编的，如果有人访问这个页面就让它重定向到about页面

重定向去哪里可以通过一个函数设置，通过参数to可以取到相关参数信息，如url的参数信息

 

别名就是取一个别名，访问这个别名的时候还是访问同一个组件，访问self的时候也是访问我meCom的组件，但是这个/self路径还是不会改的

 

路由组件传参

告诉路由我是通过props传参，设置为true

 

通过函数的写法可以将query的值传搭配parameters，这个参数是props里面，可以打印router查看这个router对象属性

 

 

最后如果路由都没有这些路径，配置一个404页面，放到最后

 

 

导航守卫

比如我们的vue是单页面的应用，页面跳转时红框部分是不变的，变得是下面得内容，在页面得跳转过程中我需要做一些处理，如判断是否是vip账号，如果不是让他升级到vip中间做得这些事就是我们得导航守卫。

 

从哪里跳转到哪里，中间发行没有登陆可以用next让它跳转到登陆的页面，或者说继续完成后面的跳转可以直接用next，next设置为false就相当于不进行跳转，beforeEach

是在跳转过程中要干的事情。

如判断是否有登陆

跳转之后：应用，如跳转之后这个人停留在这个页面多长时间

 

路由独享守卫

如果我们只需要某个路由触发这个函数，才需要进行这个权限的判断，如下面，进入到about页面才触发这个功能

 

组件内的守卫

比如我们路由跳转到这个组件里的时候要做什么，如这几个函数可以写在我们的about组件里面，如在离开页面时可以做一个弹框，告诉用户有没有保存

 

路由元信息

在路由上配置一些参数来说明这个路径的信息，如在about路由下设置一个元信息，打印to出来就会显示需要登陆，便可以以此为依据在beforeeach里调用判断是否登陆信息

过度动效，切换页面的时候慢慢划过来

 

数据的获取

1.导航完成后获取数据

在生命周期created那里获取数据

2.在进入路由之前获取数据

在组件里的beforeRouterEnter那里获取，获取完了再进去，这是最佳性能

 

滚动行为：切换页面时希望这个页面滚动到哪里

在newrouter那里设置，回到之前的一半

 

keep-alive保存这个缓存，不要直接干掉这个缓存

路由懒加载

什么是懒加载，就是我们整个网站都是单页面应用的时候，有可能我这个网站很大很大，有几百个页面，不可能一次性加载。

就是把我需要显示的先加载进来，当用户点击需要的页面的时候，我们再做ajax请求，把相关的vue加载进来，降低一次性的大加载量，就是按需进行加载，用回调函数加载内容

对组件进行分组，下面webpack报包括这个about和ME组件，默认加载这个about包的时候把这两个都加载进来，不用一个个的去加载了