四十四、动态路由

• 动态参数路由
  • /stu/:id
  • /stu/1、/stu/2
• 动态的添加/删除路由表里面的路由
  • 角色A：1、2、3、4、5
  • 角色B：1、2、4

基础知识

这里的 router 就是通过 createRouter 方法创建的路由实例。

• router.addRoute( )：动态的添加路由，只注册一个新的路由，如果要跳转到新路由需要手动 push 或者 replace.
• router.removeRoute(name)：动态的移除路由，除了此方法移除路由，还有几种方式

• 通过添加一个名称冲突的路由。如果添加与现有路由名称相同的路由，会先删除旧路由，再添加新路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的 name
router.addRoute({ path: '/other', name: 'about', component: Other })

• 通过调用 router.addRoute( ) 返回的回调函数，调用该函数后可以删除添加的路由。当路由没有名称时，这很有用。

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

如果要添加嵌套的路由，可以将路由的 name 作为第一个参数传递给 router.addRoute( )

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 }],
})

另外还有两个常用 API：

• router.hasRoute(name)：检查路由是否存在。
• router.getRoutes( )：获取一个包含所有路由记录的数组。

实战案例

实现一个后台管理系统，该系统根据用户登录的不同角色，显示不同的导航栏。

权限分为三种：

• 管理员：能够访问所有模块（教学、教师、课程、学生）
• 教师：能够访问教学、课程、学生模块
• 学生：能够访问课程模块