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 样式也被带过来的问题。
原创文章,作者:3628473679,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/150401.html