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

方案一

//先在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} 
},