Vue3-40-路由- 动态路由

说明

复制代码
本文主要介绍了 对路由的动态配置,主要包括以下几个部分:
	1、判断某个路由是否存在;
	2、查看路由对象中的所有路由配置;
	3、添加一个路由;
	4、删除一个路由。

针对上述四个方面,vue-router 中提供了对应的 API ,
因此,本文将主要介绍对应的API及其使用方法。

API 说明

注意 : 以下API 都是 全局路由配置对象的方法!
hasRoute(路由名称) : 判断某个路由是否存在,参数为 目标路由的名称,即 name 属性;
getRoutes(): 无参数,返回路由列表;
addRoute(): 添加路由
removeRoute(路由名称): 移除路由,参数为 目标路由的名称,即 name属性

下面介绍一下具体的使用

判断路由是否存在 hasRoute

ts 复制代码
  // 引入路由相关的方法
  import { useRouter} from 'vue-router';

  // 声明 路由实例对象 
  const routerObj = useRouter()

  // 判断是否存在某个路由 : 参数是路由的 name 
  console.log('判断是否包含 /a 路由 :',routerObj.hasRoute('aroute'))

获取路由的配置列表 getRoutes

ts 复制代码
 // 引入路由相关的方法
  import { useRouter} from 'vue-router';

  // 声明 路由实例对象 
  const routerObj = useRouter()

  // 查看所有的路由对象
  console.log('所有的路由配置列表 :',routerObj.getRoutes())

添加路由

常规添加

参数只有一个,就是目标路由配置对象

ts 复制代码
  // 引入路由相关的方法
  import { useRouter} from 'vue-router';

  // 声明 路由实例对象 
  const routerObj = useRouter()

  // 执行路由对象的添加
  routerObj.addRoute({
            path:'/c',
            name:'croute',
            component: () => import('./componentC.vue')
        })

添加路由到某个路由下成为子路由

参数有两个:
参数1 : 父级路由的 name
参数2 :目标路由的配置对象

ts 复制代码
  // 引入路由相关的方法
  import { useRouter} from 'vue-router';

  // 声明 路由实例对象 
  const routerObj = useRouter()

  // 添加嵌套路由
  routerObj.addRoute('aroute',{
            path:'c',
            name:'crouteChild',
            component: () => import('./componentC.vue')
        })

移除路由

根据路由名称执行移除

ts 复制代码
  // 引入路由相关的方法
  import { useRouter} from 'vue-router';

  // 声明 路由实例对象 
  const routerObj = useRouter()

  // 根据名称移除路由
  routerObj.removeRoute('aroute')

当路由没有name的时候该怎么办

复制代码
通常情况下,我们在路由配置的时候都会指定 【name】属性,
但是,在动态路由添加的时候,可能不会指定 【name】属性,
此时,就有了第二种的移除路由的方式,
那就是,在动态添加路由 addRoute() 的时候,会有一个返回值对象,
我们可以把这个返回值对象作为一个参数,调用一下,就会完成路由的移除动作。

代码如下:
ts 复制代码
  // 引入路由相关的方法
  import { useRouter} from 'vue-router';

  // 声明 路由实例对象 
  const routerObj = useRouter()

  // 接收一下 addRoute() 的回掉函数
  let routeCObj = routerObj.addRoute({
            path:'/c',
            name:'croute',
            component: () => import('./componentC.vue')
        })

  // 调用一下上面的回掉函数,对应的路由对象就被移除了
  routeCObj();
  // ok,完成移除操作
相关推荐
叫我阿柒啊1 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊1 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊2 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊2 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊2 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊3 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊3 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare4 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化
叫我阿柒啊4 天前
从全栈开发到微服务架构:一位Java工程师的实战经验分享
java·ci/cd·kafka·mybatis·vue3·springboot·fullstack
叫我阿柒啊4 天前
Java全栈工程师的面试实战:从基础到复杂问题的完整解析
java·数据库·spring boot·微服务·vue3·测试·全栈开发