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包的时候把这两个都加载进来,不用一个个的去加载了