路由配置☞对于静态路由和动态路由的理解以及路由传参大总结

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

在之前的文章中juejin.cn/post/710826… 给大家讲解权限设计思想，为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，之前详细介绍了RBAC(Role-Based Access control)权限模型 ，也就是基于角色的权限分配解决方案

总结一句话：一个人可以有不同的角色，每个角色有不同的功能

今天给大家讲解不同权限动态生成功能菜单的整体思路：

静态路由和动态路由

理解不同权限动态生成功能菜单的整体思路：

• 静态路由表：不需要做权限控制的路由，每个用户都可以正常访问（登录、注册、404等）。
• 动态路由表：需要做权限控制的路由，用户如果权限不一致访问到的路由也不一样

在项目中，我们要实现的最终效果是：不同用户登陆进来时，显示出来的菜单功能是不同的

路由传参

路由传参☞声明式传参

<router-link> to="/home?参数名=值">首页</router-link>    //URL?a=1&b=2
<router-link> to="/home/值">首页</router-link>  // URL/:id (需在路由规则里配置/path/:参数名)

路由传参☞编程式传参

path会忽略params参数

this.$router.push({})

编程时传参分为几下几种情况：

1、this.$router.push("路径上携带参数")

this.$router.push(`/employees/detail/${row.id}`)    //携带 路由 参数   路由配置 /:id
​
this.$router.push(`/employees/detail?id=${row.id}`) //携带 查询 参数   路由无配置

2、this.$router.push({path:"路径携带参数"})

this.$router.push({ path: `/employees/detail/${row.id}`})   //携带 路由 参数   路由配置 /:id
this.$router.push({ path: `/employees/detail?id=${row.id}`})//携带 查询 参数   路由无配置

3、name+query

 this.$router.push({ 
     name: `detail`,
     query: { 
         id: row.id
     }
 })

4、path+query

 this.$router.push({
     path: `/employees/detail`,
     query: {
         id: row.id 
     }
 })

5、name+params

this.$router.push({ 
    name: `detail`,
    params: {
        id: row.id 
    }
})

/* path： 'detail/:name/:id'  */
this.$router.push({ 
    name: `detail`,
    params: { 
        name: 'jack',
        id: row.id
    }
})

6、name+query+params

 /* 路由配置路径： 'detail/:name/:id' */
this.$router.push({
    name: `detail`,
    params: { name: 'jack', id: row.id },
    query: { sex: row.sex }
 })