解决$router.go(-1)返回上一层页面不刷新页面问题

原因：页面没有跳转过去，但网址已经跳转过去了，这个原因是因为他没有进行缓存，所以页面没有进行及时的渲染。

方案一

//先在router/index.js中添加路由元信息，设置需要缓存的页面 routes: [{ path: '/', name: 'index', component: index, meta: { keepAlive: false, //此组件不需要被缓存 } },{ path: '/page1', name: 'page1', component: page1, meta: { keepAlive: true, //此组件需要被缓存 } },{ path: '/page2', name: 'page2', component: page2, meta: { keepAlive: true, // 此组件需要被缓存 } },{ path: '/page3', name: 'page3', component: page3, meta: { keepAlive: false, // 此组件不需要被缓存 } } ]

 

然后在vue中改写<router-view> 加一个路由参数判断

<keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 page1,page2 --> </router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"> <!-- 这里是不被缓存的视图组件，比如 page3 --> </router-view>

 

方案二

可以在点击跳转页面之前，获取当前的路由，记录下来，然后指定跳转

1、store里怎么写和怎么取就不赘述了，beforenter...等方法看自己使用需求了，下面用的beforeEach

beforeEach router.beforeEach((to,from,next) => { if(to.meta.gorouter){ //判断该路由是否需要权限 Store.commit("setFromRouter", from) //路由跳转前记录上一级路由 next() }else{ next({ path:'/login', query:{redirect:to.fullPath} //将该路由path传入login页面，登陆成功后跳转到该页面 }) } }else{ Store.commit("setFromRouter", from) //路由跳转前记录上一级路由 next() } })

 

在vue中需要返回的方法里这样调用就行

this.$router.push(this.FromRouter).then(r => {})

this.FromRouter来源与所在组件的computed计算属性

computed: { FromRouter: function(){ return this.$store.getters.getFromRouter } },