首页 > web前端 > Vue.js > 正文

vue3怎么动态添加路由

WBOY
发布: 2023-05-17 23:22:16
转载
4593人浏览过

一、初始化项目

初始化vite + vue + ts项目,引入vue-router。
目录结构如下,注意这个404重定向,vue3不支持直接使用“*”匹配所有路由了,要使用:catchall(.*)

vue3怎么动态添加路由

初始化路由:

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页面。

vue3怎么动态添加路由

立即学习前端免费学习笔记(深入)”;

二、添加“vip”路由

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

度加剪辑
度加剪辑

度加剪辑(原度咔剪辑),百度旗下AI创作工具

度加剪辑 63
查看详情 度加剪辑
import {useRouter} from "vue-router";
let router = useRouter();
function addRouter(){
  router.addRoute(  {
    path: "/vip",
    component: () => import("../views/VipPage.vue")
  })
}
登录后复制

此时我们再去访问vip路由路径:

vue3怎么动态添加路由

可以成功访问了。

三、总结

通过使用router对象的addRoute方法,可以实现动态添加路由。有时候可能是添加嵌套路由,也就是子路由。

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 }],
})
登录后复制

以上就是vue3怎么动态添加路由的详细内容,更多请关注php中文网其它相关文章!

相关标签:
路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载
来源:亿速云网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号