w3h5

vue项目如何实现返回上一页

vue 返回上一页有两种方法:

如果使用的是 vue-router ,this.$router.go(-1) 就可以回到上一页。 history.go(-1) 是回到浏览器上一页。

但是由于 Vue 应用是单页应用,浏览器的访问历史未必和 Vue 的浏览历史相同。

还有一点,就是使用 router 跳转的时候,Vue 不会重新加载 CSS 。比如从 A 页面跳到 B 页面,会沿用 A 页面中的 CSS 样式,我在 A 页面中设置了 .content 的上边距是 20px ,B 页面没有设置边距,但如果从 A 页面跳到 B 页面,B 页面中的 .content 也会带有 20px 的上边距。

解决办法就是给 style 标签添加 scope 属性。

Vue的 style 中使用 scope 属性,浏览器渲染后,会给每个组件中的元素增加自定义属性,浏览器渲染样式时会变成 data-v-xxx 

这也是 scoped 的工作原理,所以在子组件中写的元素,只有子组件中的自定义属性,而父组件中加的样式,最终浏览器渲染时是找不到对应的元素的,(因为父组件中样式给出的自定义属性是不一致的),所以子组件中的样式没办法在父组件中修改。

这样也就解决了,页面跳转上个页面的 CSS 样式也被带过来的问题。

声明:本文由w3h5原创,转载请注明出处:《vue项目如何实现返回上一页》 https://www.w3h5.com/post/452.html

赞 (0)
分享到: +More |

评论 沙发

换个身份