Vue 中使用 router-link 后,URL 变化但是页面不刷新,Vue获取java后台传过来的值
一.遇到的问题:Vue 中使用 router-link 后,URL 变化但是页面不刷新今天在项目中遇到了这样的问题: 当使用 router-link 跳转后, 想要返回,浏览器中的地址虽然改变了,但是页面却并没有刷新解决的办法1.我最原始的使用了刷新页面的办法,在vue中使用了this.$router.go(-1)返回上一级,然后使用this.$router.go(0) ,使用了这种方...
一.遇到的问题:Vue 中使用 router-link 后,URL 变化但是页面不刷新
今天在项目中遇到了这样的问题: 当使用 router-link 跳转后, 想要返回,浏览器中的地址虽然改变了,但是页面却并没有刷新
解决的办法
1.我最原始的使用了刷新页面的办法,在vue中使用了this.$router.go(-1)
返回上一级,然后使用this.$router.go(0)
,使用了这种方式之后,虽然很简单的实现了页面刷新,但是很致命的是刷新的时候有很明显的卡顿效果,很难受
2.在父组件的 router-view 中加一个 key
在点击跳转的时候,首先在返回的时候this.$router.go(-1)
,依旧跳转,但是不用刷新,在我们
父组件的 router-view 中加一个 key
<transition>
<router-view :key="$route.fullPath"></router-view>
</transition>
这个时候,当我们的浏览地址改变的时候,这里的key值监听到改变,会自动的刷新页面,而且,页面刷新的时间基本没有,特别的流畅
我为了解决这个问题,在网上找了很多的文章,但是几乎都是告诉我刷新的各种方法,但是基本没有用,但是我看到了这篇文章之后就帮助到了我
Vue 中使用 router-link 后,URL 变化但是页面不刷新
二:遇到的问题:Vue获取java后台传过来的值
刚刚开始接触vue,所以我还是使用springboot的方式通过ModelAndView跳转到前台页面,并且带了一个值,想要在前台的页面一加载就获取到这个值,
刚刚开始使用vue,我还是使用script的方式映入vue所需的包的
解决的办法
使用生命周期函数mounted,而且我还使用了jquery,
因为我是通过这样存值,然后下面的方式取值,我也觉得好像很不伦不类,但是对我来说,能够获取到就很好了
mounted() {
this.phone2 = $("#phone2").val();
},
更多推荐
所有评论(0)