解决$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
    } 
},