适用VUE3的路由记录插件

特点

• 自动记录路由变化，并存储在App中，方便随时调用

依赖

• vue3 （"vue": "^3.5.13"）
• vue-router4 （"vue-router": "^4.5.0"）

安装

1npm i vue3-router-history-record -S

使用

1    import vue3RouterHistoryRecord from 'vue3-router-history-record'
2    app.use(vue3RouterHistoryRecord)
3    持久化路由记录
4    app.use(vue3RouterHistoryRecord {persist: true})
5

注意

    因为插件依赖于vue-router，所以需要在main.js中引入并使用vue-router，并将  vue3RouterHistory 插件注册放到 vue-router 插件后面

参数获取

    js中获取数据： app.config.globalProperties.$history
    js操作函数：app.config.globalProperties.$history.remove(index) 删除指定索引的路由记录
    js操作函数：app.config.globalProperties.$history.clear() 清除所有路由记录

    component中获取数据：     <History class="history">
                                <template #default="slotProp">
                                    <div class="item" v-for="(item, index) in slotProp.list" @click="jump(item)">
                                        {{ item.name }}
                                        <button @click.stop="slotProp.remove(index)">删除</button>
                                    </div>
                                    <button class="clear" v-if="slotProp.list.length" @click="slotProp.clear()">清除</button>
                                </template>
                            </History>
    操作函数：remove(index) 删除指定索引的路由记录
    操作函数：clear() 清除所有路由记录