vue3-history v0.0.18

vue3-history

记录vue3 实例中 路由变化 主要用于当前网站返回按钮的功能. 会在app全局注入$history 字段 ex: 1. 用户直接访问非首页url. 左上角 返回按钮用来判断当前实例访问记录, 如果当前访问记录为1, 那么返回按钮直接push home 页面. 如果访问记录>1 则直接router.back()

Install

pnpm add vue3-history

Api

Useage

// main.ts 
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createHistory } from "vue3-history";

// core 
const Vue3History = createHistory({
  router,
  debug: true,
  onRouteChange: (v: any) => {
    console.log("onRouteChange", v);
  },
  onQuit() {
    alert('已经到第一页了')
  },
})

createApp(App).use(router).use(Vue3History).mount("#app");

<script setup lang='ts'>
import { useRouter } from 'vue-router'
import { getCurrentInstance } from 'vue'
/** 两种用法
    1. 从getCurrentInstance 中获取
    2. template 中可直接通过$history 使用
*/
const { proxy } = getCurrentInstance()
const history = proxy?.$history
    
</script>

<template>
	<div>
    堆栈信息: {{$history.stack}}
    当前路由下标: {{$history.current}}
    </div>
</template>