vue3_router(路由)

一、路由

route：相当于this.$route 返回当前路由的地址

router：相当于vue2中this.$rouer 返回路由器实例

<template>
    <div class="index">
        <div @click="routerGo">跳转路由</div>
        <div @click="getrouterInfo">获取路由信息</div>
    </div>
</template>

<script setup>
    let router=useRouter()
    let route=useRoute()
    let routerGo = () => {
        console.log(router ,new useRouter);
         router.push('/test')
    };
    let getrouterInfo=()=>{
        console.log(route.name,route.path);
    }
</script>
<style lang="scss">

</style>

二、导航守卫

//前置路由守卫
router.beforeEach((to,from,next)=>{
    //这里做路由鉴权处理成功使用next()跳转
    console.log(to,from,next);
    next()
})