经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3动态添加路由
来源:jb51  时间:2022/6/20 16:23:04  对本文有异议

前言

有的时候我们需要根据不同的用户身份生成不同的路由规则,例如:

vip用户应该有自己的vip页面所对应的专用路由。

一、初始化项目

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

初始化路由:

  1. import {createRouter, createWebHashHistory} from "vue-router";
  2. const routes = [
  3. {
  4. path: "/",
  5. component: () => import("../views/HomePage.vue")
  6. },
  7. {
  8. path: "/404",
  9. component: () => import("../views/ErrorPage.vue")
  10. },
  11. {
  12. path: "/:catchAll(.*)", // 不识别的path自动匹配404
  13. redirect: '/404',
  14. },
  15. ]
  16. const router=createRouter({
  17. history: createWebHashHistory(),
  18. routes
  19. })
  20. export default router;

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

二、添加“vip”路由

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

  1. import {useRouter} from "vue-router";
  2. let router = useRouter();
  3. function addRouter(){
  4. router.addRoute( {
  5. path: "/vip",
  6. component: () => import("../views/VipPage.vue")
  7. })
  8. }

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

可以成功访问了。

三、总结

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

  1. router.addRoute({ name: 'admin', path: '/admin', component: Admin })
  2. router.addRoute('admin', { path: 'settings', component: AdminSettings })
  3.  
  4. // 这等效于:
  5. router.addRoute({
  6. name: 'admin',
  7. path: '/admin',
  8. component: Admin,
  9. children: [{ path: 'settings', component: AdminSettings }],
  10. })

到此这篇关于vue3动态添加路由的文章就介绍到这了,更多相关vue动态路由内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号