vue3_router(路由)

原创已于 2023-12-29 10:44:47 修改 · 477 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#智能路由器

于 2023-12-25 11:11:35 首次发布

vue3 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了Vue中的路由API使用，如`useRouter`和`useRoute`，以及如何进行跳转和获取路由信息。同时，详细讲解了前置路由守卫在路由鉴权中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、路由

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()
})