这几天,忙完了后端,又赶来写前端了。一个萌新在初次独立使用 Vue 这个框架时,难免会出现很多意外的,我也是在这条路上跌跌撞撞,遇到了很多看似很奇怪的 Bug,却怎么也不知道哪里错了。

路由和导航

在 Vue 中,路由一般是由 Vue-router 实现的,在主页面中(View)存在一个 router-view 的标签,当地址发生改变时,仅仅会在 router-view 中的部分会被重载。

注意: 需要用 router-link 跳转指定路由,否则会使整个页面重载。

比如我,作为一个新手,无意间使用了 a 便签,后期难以发觉是这里出现了问题。

重载动画

router-view 里的内容在跳转前后是支持过渡动画的,只需要在外层包上一个 transition 标签就 ok 了。

<transition name="slide-fade" mode="out-in">
        <router-view class="body"></router-view>
</transition>

定义一个 name 用于写动画样式,mode="out-in" 用于使出现和消失动画同时进行。

Props 和 Methods

在 Props 中 default 字段调用 Methods 中的方法会报错,提示 undefined。原因未知。

在 Vue 生命周期中,Props 和 Methods 都是在 created 之后的。

其他

还请大佬指正。