vue3.0路由管理

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 423 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用vue-router库来设置路由结构，包括创建`createRouter`和`createWebHashHistory`，定义路由规则，以及如何通过`useRouter`钩子获取和操作当前路由。

import {createRouter, createWebHashHistory} from 'vue-router'

const routes = [
  
    {
        path: "/",
        component: () => import(""),
        children: [
   
            {
                path: "/",
                redirect:'/home'
            },
            {
                path: "/home",
                name: "home",
                component: () => import("@/pages/home"),
            }
        ]
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

使用

import {useRouter} from "vue-router";

import router from 'router'
// 或
const router = useRouter();

// 获取
router.currentRoute.value.name
// 跳转
 router.push("");