Vue-Router 第十四节：动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，我们可能想在应用程序已经运行的时候添加或删除路由。我们一般使用动态路由，都是请求后端接口给我们返回路由表再进行处理。

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。

1、添加路由

router.addRoute()

  router.addRoute({path:'/user',component:import("@/views/user/index.vue")})

案例

添加路由并跳转

// router/index.ts

import path from 'path';
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
// 1、定义路由 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [
    // 可直接导入或者引入
    {
        path: '/',
        component: () => import("@/views/login/index.vue"),
    },
    {
        path: '/home',
        component: () => import("@/views/home/index.vue"),
          // *****************在路由独享守卫里进行路由添加******************
        beforeEnter:(to,from,next)=>{
         router.addRoute({path:'/user', name:'user',component:import("@/views/user/index.vue")})
            next()
        }
    }
]


// 2、创建路由实例并传递routes
const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior(to, from, savedPosition) {
        return { top: 1000 }
    }
})

// 导出
export default router

// home/index.vue
<template>
    <div style=" background-color: aquamarine;">
        <H1>
            我是Home页面
        </H1>
        <button @click="jump">
            跳转路由
        </button>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const jump=()=>{
    // **********进行手动导航（如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航 才能显示路由）
    router.push('/user')         
}
</script>

<style></style>

2、删除路由

方法一

通过添加一个名称冲突的路由

  router.addRoute({path:'/user',name:'user',component:User})
  // 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
  router.addRoute({ path: '/userlist', name: 'user', component: UserList })

方法二

通过调用 router.addRoute() 返回的回调

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

方法三

通过使用 router.removeRoute() 按名称删除路由

router.addRoute({path:'/user',name:'user',component:User})
router.removeRoute('user')

案例

以方法三为案例：路由配置文件同上。

// home/index.vue
<template>
    <div style=" background-color: aquamarine;">
        <H1>
            我是Home页面
        </H1>
        <button @click="jump">
            跳转路由
        </button>
        <button @click="del">
            删除路由
        </button>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const jump=()=>{
    router.push('/user')
}
 // **********删除user路由**************
const del=()=>{
    router.removeRoute('user')   
}
</script>

<style></style>

3、添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数传递给 router.addRoute()，这将有效地添加路由，就像通过 children 添加的一样：

router.addRoute({ name: 'admin', path: '/admin', component: Admin })
router.addRoute('admin', { path: 'settings', component: AdminSettings })

这等效于：

router.addRoute({
  name: 'admin',
  path: '/admin',
  component: Admin,
  children: [{ path: 'settings', component: AdminSettings }],
})

4、查看现有路由

router.hasRoute()：检查路由是否存在。

router.getRoutes()：获取一个包含所有路由记录的数组。

案例

<template>
    <div style=" background-color: aquamarine;">
        <H1>
            我是Home页面
        </H1>
        <button @click="jump">
            跳转路由
        </button>
        <button @click="del">
            删除路由
        </button>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const jump=()=>{
    if(router.hasRoute('user')){   // ************** 判断是否存在路由 user***********
        router.push('/user')
    }else{
        alert('抱歉！没有此路由')
    }
}

const del=()=>{
    router.removeRoute('user')
}
</script>

<style></style>