vue中动态路由怎么添加,vue-router动态添加路由
本文主要介绍vue3的动态路由添加。文章围绕主题进行了详细介绍，具有一定的参考价值。有需要的朋友可以参考一下。
目录
前言1、初始化项目2、添加“vip”路线3、总结
前言
有时候我们需要根据不同的用户身份生成不同的路由规则，例如：
Vip用户应该有自己对应vip页面的专用路线。
一、初始化项目
初始化vite vue ts项目并引入vue路由器。
目录结构如下。注意这个404重定向。vue3不支持直接使用“*”匹配所有路由。而是使用：catchAll(。*).
初始化路由：
从“vue-router”导入{createRouter，createWebHashHistory }；
常量路由=[
{
路径：“/”，
组件：()=导入(./views/home page . vue’)
},
{
路径：“/404”，
组件：()=导入(./views/error page . vue’)
},
{
路径：“/:catchAll(。*)，//无法识别的路径自动匹配404
重定向：“/404”，
},
]
const router=createRouter({
history: createWebHashHistory()，
路线
})
导出默认路由器；
如果你现在访问vip路线，你会跳到404页。
二、添加“vip”路由
如果您需要访问vip页面，那么您需要动态添加vip路线。下面的代码实现了vip路线的添加：
从“vue-router”导入{ user outer }；
let router=user outer()；
函数addRouter(){
router.addRoute( {
路径：“/vip”，
组件：()=导入(./views/VIP page . vue’)
})
}
此时我们再去访问vip路由路径：
可以成功访问。
三、总结
如您所见，动态添加路由意味着使用router对象的addRoute方法。有时可以添加嵌套路由，即子路由。
router.addRoute({ name: admin ，path: /admin ，component: Admin })
router.addRoute(admin ，{ path: settings ，component: AdminSettings })
//这相当于：
router.addRoute({
姓名：“管理员”，
路径：“/admin”，
组件：管理，
子级：[{ path: settings ，component: AdminSettings }]，
})
关于vue3动态路由的这篇文章到此为止。有关vue动态路由的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。