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

水深无声 2022-10-30 00:33 181阅读 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 条评论，181人围观）

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

相关阅读

相关 Vue 路由管理

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

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

相关 Vue 动态路由

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

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

相关 [Vue]动态路由

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

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

相关 Vue动态路由

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

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

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

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

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

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

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

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

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

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

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

相关 Vue动态路由

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

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

相关 Vue中动态路由

（1）在router.js 中配置动态路由，注意：路径path后面加id就是动态添加值路由：注意 :id 是个动态值 { path: '/qu

灰太狼/ 2022年03月01日 15:48/ 0 赞/ 290 阅读

相关 vue动态渲染路由

router.js import Vue from 'vue' import Router from 'vue-router' import Home from './v

迈不过友情╰/ 2021年11月10日 05:48/ 1 赞/ 445 阅读