一.遇到的问题: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();
        },
Logo

前往低代码交流专区

更多推荐