如何维护Vue.js中的路由跳转记录

在Vue的项目中，如果我们想要回退或者后退，我们一般会调用api router.go(n)，但是在实际操作中，使用这个api是有风险的，就是会让用户跳出当前的应用，因为它记录的是浏览器的访问记录，而不是你当前应用的访问记录，这是一件非常可怕的事情。

解决方法是我们自己维护一个历史跳转记录。

案例和使用场景

代码地址:/dora-zc/mini-vue-mall(本地下载)

这是一个基于Vue.js的小型商场案例，应用场景是:

实现一个Vue插件src/utils/history.js，通过堆栈维护页面跳转的历史，控制返回跳转。

点击返回按钮是一个堆栈操作。

在全局路由router.js中，路由器的back()方法在实例化路由之前通过原型进行扩展。

在全局afterEach中存储历史记录

代码实现

实现历史插件并维护历史。

// src/utils/history.js

常量历史= {

_history: []，//历史堆栈

安装(Vue) {

//提供Vue插件需要的安装方法。

object . define property(vue . prototype，' $routerHistory '，{

get() {

回归历史；

}

})

},

在堆栈上推送(path) {//消息

这个。_history.push(路径)；

},

pop() {

这个。_ history . pop()；

},

canBack(){

归还这个。_ history.length & gt1;

}

}

导出默认历史记录；

在路由实例化之前扩展back()方法。

// src/router.js

从“vue”导入Vue

从“vue路由器”导入路由器

从'导入历史记录。/utils/history '；

Vue.use(路由器)；

Vue.use(历史)；

//实例化前扩展路由器。

router . prototype . go back = function(){

this.isBack = true

this . back()；

}

每次之后，在路由全局中记录跳转历史。

// src/router.js

//在每个记录历史之后

router.afterEach((to，from)= & gt；{

if (router.isBack) {

//后退

history . pop()；

router.isBack = false

router . transition name = ' route-back '；

}否则{

history . push(to . path)；

router . transition name = ' route-forward '；

}

})

用于公共头组件

// Hearder.vue

& lt模板& gt

& ltdiv class="header " >

& lth 1 & gt；{ { title } } & lt/h 1 & gt；

& ltI v-if = " $ router history . can back()" @ click = " back " & gt；& lt/I & gt；

& ltdiv class="extend " >

& ltslot & gt& lt/slot & gt；

& lt/div & gt；

& lt/div & gt；

& lt/template & gt；

& lt脚本& gt

导出默认值{

道具:{

标题:{

类型:字符串，

预设值: ""

}

},

方法:{

back() {

这个。$ router . go back()；

}

}

};

& lt/script & gt；

请查看完整代码:/dora-zc/mini-vue-mall(本地下载)

摘要