路由返回上一步

1.引入路由

import { useRouter } from 'vue-router'

2.创建路由对象

const router = useRouter()

3.在模板中绑定事件

<div class="left" @click="goBack">
    <solt name="left">
        <a>&lt;</a>
    </solt>
</div>

4.实现方法

const goBack = () => {
    router.go(-1)
}

5.完整代码

<template>
    <div class="nav-bar">
        <div class="left" @click="goBack">
            <solt name="left">
                <a>&lt;</a>
            </solt>
        </div>

        <div class="center">
            <slot></slot>
        </div>

        <div class="right">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs} from "vue";
    import {useRouter} from 'vue-router'

    export default {
        setup(){
            const state = reactive({
                count: 0
            })
            const router = useRouter()
            const goBack = () => {
              router.go(-1)
            }
            return{
                ...toRefs(state),
                goBack
            }
        }
    }
</script>

<style lang="scss" scoped>
    .nav-bar{
        background-color: #42b983;
        color: #ffffff;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 9;
        height: 45px;
        line-height: 45px;
        box-shadow: 0 5px 5px rgba(100,100,100,0.2);
        display: flex;
        .left,.right{
            width: 60px;
        }
        .center{
            flex: 1;
        }
    }

    a{
        font-size: 14px;
    }
</style>