0%

vue 动态路由记录 以及 iview 面包屑导航的小记录

最近使用 vue 的场景比较多,所以体会也就更多了,以前用过但是没有很明确印象的,也就发现的更多了,所以现在决定都记录下来。以后找起来也方便,记忆也能加深。

这次动态路由用的比较多,所以在相同路由来回跳转的时候,url虽然跳转了,但是因为组件复用问题,没有调用vue的生命周期函数,导致数据没有刷新的问题也就明显的遇到的次数多了,vue-router 提供了两种解决方案,一种是 watch $router对象的变化,然后在变化的时候去刷新数据,另一种是调用 beforeRouteUpdate 设个导航守卫,昨天在弄这块的时候我还思考了一波 next 方法的调用时机,是先跳转在加载数据还是先加载数据在跳转呢?今天也算是想通了吧,在不同路由间跳转到的时候我们会因为用户体验问题,而去处理先加载数据在渲染页面,或者先渲染页面在加载数据。但是呢,这个 beforeRouteUpdate 是组件内的守卫方法,我们看下 vue-router 的说明:

beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 this
},

通过说明我们可以知道了,这个就是在自己组建跳转的时候才会触发,而next就是处理url变化的方法,所以在next前后处理就很随意了。想怎么整就怎么整。不过如果需要对跳转进行更多的控制的时候还是需要注意顺序的了。

好了,重要的笔记完事了,开始吐槽模式了,这个项目用了iview,在使用面包屑导航的时候,我发现传入to 跳转url是个 object的时候,他不会像 router-link 那样正确的渲染出来,我也看了他的源码,貌似也是处理好的了。其实这就是我想吐槽的地方了,为什么用字符串的时候就可以在a标签上面显示连接呢,明明用object的时候就不会显示href呢,其实应该也是ok的啊。真的难受,我一直以为渲染错误了呢,但是当你真正点击的时候却是正常跳转的了。