介绍 <李> //,/src/history.js跑龙套
const History =, {
,_history:[],,//,历史记录堆栈
,安装(Vue) {//,才能提供Vue插件所需安装方法
Object.defineProperty才能(Vue.prototype, & # 39;美元routerHistory& # 39;,, {
,,get (), {
,,,return 历史;
,,}
})才能
},
,推动(路径){//大敌;入栈
this._history.push才能(路径);
},
,pop () {
this._history.pop才能();
},
,canBack () {
return 才能;this._history.length 祝辞,1;
,}
}
export default 历史; //, src/router.js
import Vue 得到& # 39;vue # 39;
import Router 得到& # 39;vue-router& # 39;
import History 得到& # 39;效用。//历史# 39;;
Vue.use(路由器);
Vue.use(历史);//,实例化之前,扩展路由器
时间=Router.prototype.goBack function (), {=,this.isBack 真实;
,this.back ();
} //, src/router.js//,afterEach记录历史记录
router.afterEach((,,),=祝辞,{
,if (router.isBack), {
,//后退
,History.pop ();=,router.isBack 假;=,router.transitionName & # 39; route-back& # 39;;
,}else {
,History.push (to.path);=,router.transitionName & # 39; route-forward& # 39;;
,}
}) //, Hearder.vue
& lt; template>
,& lt; div 类=癶eader"比;
,& lt; h2>{{标题}}& lt;/h2>
小姐,& lt; v=皉outerHistory.canBack美元()“,@click=癰ack"祝辞& lt;/i>
,& lt; div 类=癳xtend"比;
& lt;才能slot> & lt;/slot>
,& lt;/div>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,道具:{
,标题:{
,,类型:字符串,
默认值:,“才能”;
,}
},
,方法:{
,回(){
这才能。美元router.goBack ();
,}
,}
};
& lt;/script>
小编给大家分享一下Vue.js中该怎么自己维护路由跳转记录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>前言
在Vue的项目中,如果我们想要做返回,回退操作时,一般会调用router.go (n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你当前应用的访问记录,这是非常可怕的事情。
解决方案就是,我们自己来维护一份历史跳转记录。
<强>案例与使用场景
代码地址:https://github.com/dora-zc/mini-vue-mall (本地下载)
这是一个基于Vue.js的小型商城案例,应用场景:
自己实现一个Vue插件src/跑龙套/history.js,通过堆栈的方式维护页面跳转的历史记录,控制返回跳转
<李>点击返回按钮是出栈操作
<李>在全局路由路由器。js中,实例化路由前,通过原型扩展路由器的支持()方法
<李>在全局afterEach中存放历史记录
<强>代码实现
实现历史插件,维护历史记录
在路由实例化之前,扩展后()方法
在路由全局afterEach中记录跳转历史
在公用头组件中使用
以上是“Vue.js中该怎么自己维护路由跳转记录”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
