id vue2路由传参_Vue路由传递参数详细说明

前言：

最近我跟同事在做一个BI系统，采用前后端分离。整个系统包括数据分析系统、运营支持、系统设置等多个子系统。数据分析系统其实就是做各种数据报表、数据统计、实时数据的系统，这里面其实整个页面就是一个模板，最上面是filter、第二级是统计图、最下面是table数据。所以在数据分析子系统中，只要配置一个路由就可以匹配所有页面，在系统中，我把这个为公用路由。至于公用路由权限如何鉴定其实很简单：获取到用户权限列表后，渲染出所有的权限菜单，但注意每次跳转时一定要进行权限校验，具体原因自行思考。说着有点跑偏了，那么这个公用路由怎么可以匹配多个业务视图呢？(一个路由对应多个业务视图)

很自然我们就会想通过路由传递参数，但进入到公用数据分析路由中时，组件可以获取路由信息，根据路由信息我们去获取filter\获取图表\获取table数据\当前视图名称，从而渲染出不同的数据分析报表、统计。

备注：为了减低复杂度，我这里通过传递一个参数(数据请求接口)获取上面的所有数据，也就是通过一个接口把整个页面的数据都获取到，数据结构大致如下：

{

viewname: '留存数据'，

filters: [

{

... // 具体filter类型及数据

}

],

echarts:[

{

.... // options

}

]，

tables:[

{

... // 表格数据，表头\数据等

}

]

}

那么这个时候我们就很清楚我们的业务需求是什么了。接下来我们看下我们队这个数据分析公用路由的配置，如下：

// 路由配置

{

path: '',

component: Layout,

children: [{

path: '/data/config/:block/:page',

component: () => import('@/views/data/common'),

name: 'common',

meta: { title: 'common', icon: 'common', noCache: true }

}]

}

'''

path:中统一规范data/config/:block/:page