Vue3---路由动态管理(router.addRoute())

水深无声 2022-10-30 00:33 294阅读 0赞

*  **Vue2中，可以通过路由的 addRoutes() 和 addRoute()  两种方法实现路由权限动态渲染，但在Vue3中，摒弃了 addRoutes() 方法，只保留了 addRoute() 单个添加路由配置的方法。**
 *  **Vue2中路由对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

*   **Vue3中路由对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1][]

*  **Vue3动态添加路由：****在main.js中或者在登录回调中进行动态渲染路由。代码参考如下：**

const about = {    //接口返回路由信息
      path: '/about',
      name: 'About',
      component: () => import('./views/About.vue')
    };
    router.addRoute(about); //添加到路由

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20221024/44bf7090d68e4dfbb972a7468e0b5889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70 1]: /images/20221024/8d65255eed414fd2a2983268ef845d75.png

发表评论取消回复

表情：

评论列表（有 0 条评论，294人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue动态路由

本文单纯的实现路由动态添加功能。 frist of all : 引入脚手架等一些网上都有教材的繁琐事，直到成功的打开页面，如下（自己做的一个登录页面） ![在这里插

超、凢脫俗/ 2023年06月12日 08:55/ 0 赞/ 91 阅读

相关 Vue 路由管理

文章目录 Vue 路由管理官网描述例子：根组件（使用路由）注册两个路由组件

蔚落/ 2023年06月04日 07:54/ 0 赞/ 154 阅读

相关 vue路由传参动态路由

[vue路由传参的三种基本方式][vue] 现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v

快来打我*/ 2023年05月29日 13:30/ 0 赞/ 86 阅读

相关 Vue 动态路由

News.vue <template> <div> <h2>News</h2> <br> <route

朴灿烈づ我的快乐病毒、/ 2022年12月22日 15:24/ 0 赞/ 268 阅读

相关 [Vue]动态路由

ebook/index.js: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

朴灿烈づ我的快乐病毒、/ 2022年12月03日 05:15/ 0 赞/ 270 阅读

相关 Vue动态路由

[https://blog.csdn.net/weixin\_42069147/article/details/108061183][https_blog.csdn.net_w

以你之姓@/ 2022年11月19日 15:51/ 0 赞/ 328 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 378 阅读

相关 Vue3---路由动态管理(router.addRoute())

Vue2中，可以通过路由的 addRoutes() 和 addRoute() 两种方法实现路由权限动态渲染，但在Vue3中，摒弃了 addRoutes() 方法，只保留

水深无声/ 2022年10月30日 00:33/ 0 赞/ 295 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 541 阅读

相关 Vue动态路由

Vue动态路由 1、添加路由 2、在导航守卫中添加路由 3、删除路由 3.1 通过添加名称冲突的路由。 3.2 通过调用rou

r囧r小猫/ 2022年08月31日 11:04/ 0 赞/ 345 阅读