vue3에서 동적으로 라우팅을 추가하는 방법

1. 프로젝트 초기화

vite + vue + ts 프로젝트를 초기화하고 vue-router를 도입하세요.
디렉토리 구조는 다음과 같습니다. Vue3에서는 모든 경로를 일치시키기 위해 "*"를 직접 지원하지 않습니다. :catchAll(.*)。

初始化路由：

import {createRouter, createWebHashHistory} from "vue-router";
const  routes = [
    {
        path: "/",
        component: () => import("../views/HomePage.vue")
    },
    {
        path: "/404",
        component: () => import("../views/ErrorPage.vue")
    },
    {
        path: "/:catchAll(.*)", // 不识别的path自动匹配404
        redirect: '/404',
    },
]
const router=createRouter({
    history: createWebHashHistory(),
    routes
})
export default router;

现在如果去访问vip路由，则会跳转到404页面。

二、添加“vip”路由

如果需要访问vip页面，那么就需要我们动态地添加vip路由，下面代码实现了vip路由

초기화 라우팅:

import {useRouter} from "vue-router";
let router = useRouter();
function addRouter(){
  router.addRoute(  {
    path: "/vip",
    component: () => import("../views/VipPage.vue")
  })
}

이제 VIP 루트로 접속하시면 404 페이지로 리디렉션됩니다.

2. 추가 " vip" 라우팅

VIP 페이지에 액세스해야 하는 경우 vip 경로를 동적으로 추가해야 합니다. 다음 코드는 vip 라우팅 추가를 구현합니다.

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

// 这等效于：
router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

🎜🎜이번에는 vip 경로를 액세스합니다. VIP 라우팅 경로: 🎜🎜 🎜🎜🎜🎜성공적으로 접속할 수 있습니다. 🎜🎜3. 요약🎜🎜라우터 객체의 addRoute 메소드를 사용하면 동적으로 경로를 추가할 수 있습니다. 때로는 하위 경로인 중첩된 경로를 추가할 수도 있습니다. 🎜아아아아

위 내용은 vue3에서 동적으로 라우팅을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!