今天和朋友们分享vue路由后退相关的知识，相信大家通过本文介绍也能对vue路由跳转后回到主界面有自已的收获和理解。自己轻松搞问题。

本文内容目录一览：

• 1、vue实现返回上一页面，页面停留在原来位置，不刷新
• 2、vue-router 方法总结
• 3、Vue 如何返回页面时不重新发接口

vue实现返回上一页面，页面停留在原来位置，不刷新

配置路由

配置App.vue文件种的router-view/

使用this.$router.back()返回

当用户在详情页点击返回的按钮时，我们把按钮的返回事件 this.router.back()， 必须用这个才能生效

vue-router 方法总结

全局守卫 ：beforeEach（登录拦截）、afterEach

路由独享守卫 ：beforeEnter（部分路由的登录拦截）

组件内守卫 ：beforeRouteEnter（权限管理）、beforeRouteUpdate、beforeRouteLeave

路由全局解析守卫 ：beforeResolve（这里根据单页面name的指向不同，去访问的接口域名也不同）

beforeRouteLeave :路由组件的组件离开路由前钩子，可取消路由离开。

beforeEach : 路由全局前置守卫，可用于登录验证、全局路由loading等。

beforeEnter : 路由独享守卫

beforeRouteEnter : 路由的组件进入路由前钩子。

beforeResolve :路由全局解析守卫

afterEach :路由全局后置钩子

beforeCreate :组件生命周期，不能访问this。

created :组件生命周期，可以访问this，不能访问dom。

beforeMount :组件生命周期

deactivated : 离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。

mounted :访问/操作dom。

activated :进入缓存组件，进入a的嵌套子组件(如果有的话)。

执行 beforeRouteEnter 回调函数next。

Vue 如何返回页面时不重新发接口

1 app.vue 里面 注意route.meta.keepAlive

template

div id="app"

transition :name="transitionName"

router-view class="child-view" v-if="! route.meta.title'/router-view

/transition

transition :name="transitionName"

keep-alive

router-view class="child-view" v-if=" route.meta.title'/router-view

/keep-alive

/transition

loading/loading

/div

/template

2 index.js里面，在不想刷新的地方 添加keepAlive:true

3 写方法

就是A跳B，如果不想让A重新发接口，就在B页面加，然后B返回A的时候，A就不发接口了

beforeRouteLeave(to, from, next) {

// 设置下一个路由的 meta

to.meta.keepAlive = true; // 让 A 缓存，即不刷新

next();

},

关于vue路由后退和vue路由跳转后回到主界面的介绍到此就结束了，不知道你找到你需要的信息了吗 ？如果想了解更多这方面的信息，记得收藏关注本站。