vue爬坑之旅---router

在vue搭建多页面应用时,那么自然而然会想到"路由",这也想起了vue官方文档对于vuex的最后描述,

也让我想起了在某次面试时,有个面试官问过这么一个问题:"请问什么时候发起ajax请求",如果重来一次的话我会回答"在你觉得需要吃饭的时候"。

那么回到碰见的问题,使用路由的时候,对于需求稍微复杂一点的web路由的嵌套是不可避免的,如图视图路由的配置

然后再是routes的配置

像这种混合使用的路由,首先在视图路由的初始化时必须给定父路由的路径,如下图

通过重定向来标明路径,为方便使用了数组来给router-link绑定的命名路由,所以如果是编程式路由时(给定的是path时)就不需要这样,这样的话使用就是"绝对路径"了。

这就是大概的项目结构,显而易见的是如果点击导航栏的菜单,那么跳过去的是wechat这个相对而言的"父路由",那么就需要在某个时机重定向一下使其跳到子路由,我选择的办法是监听$route也就是当前的路由对象。

当然这里是给f5刷新保留的路由记录,在初始化(第一次进入此路由无任何操作的情况下)是也得在wechat这个相对而言的父组件的钩子函数内(推荐created钩子)重定向一下到想要的子路由。

还有个问题就是router-link选中时的样式,官方给的active-class或者是全局的linkActiveClass(默认是模糊匹配,如果需要精准匹配的话就必须使用exact与其相对应的linkExactActiveClass),但是这里的样式只匹配于"/jk/wechat"这个路由,尽管是模糊匹配,但是貌似没能进行二次判断(具体机制查阅了资料尚未了解到,可能需要阅读源码才能了解吧0.0),那么怎么才能按照自己想要的路由路径配置相对应的样式呢,这里就用到了vue-router的另外一个属性 meta,官方解读:

    

所以可以通过给子路由绑定唯一的表示来判断当前路由是否加上样式!如图

再绑定一个自定义的样式类就ok了

今天的坑总结一下写个笔记,遇到问题得多问自己几个为什么,我可不想成为那种"内行看笑话,外行看热闹的搬运工",突然有感哈哈哈哈。