vue+ element 小白初次实践踩坑（一）-路由与location

1.需求：列表页跳转到详情页，但是详情页根据不同的路径进入，状态不同

2.分析：首先列表页会根据id不同跳到详情页，这个时候一个详情页就可以了。然后根据id可以拿到不同的数据；

第二版需求升级，要求加审核页面，审核列表也根据id进入详情页，但是这个时候的详情页与之前的详情页不同，不可以编辑，只能查看审核。同时团队okr也要可以跳到详情页，也不可以编辑。所以，我们不能共用之前的页面，需要再写一个详情页，给审核详情和团队详情

3.路由：代码部分

//okr

            {

                path: '/okr/my',

                name: 'MyOkr',

                meta: {

                    title: '我的OKR',

                },

                component: () => import(/* webpackChunkName: "myokr" */ '../views/Okr/MyOkr.vue')

            },

            {

                path: '/okr/team',

                name: 'TeamOkr',

                meta: {

                    title: '团队OKR',

                },

                component: () => import(/* webpackChunkName: "teamokr" */ '../views/Okr/TeamOkr.vue')

            },

            {

                //个人详情页

                path: '/okr/detail/:id',

                name: 'MyOkrDetail',

                meta: {

                    keepAlive: true,

                    title: '个人计划详情'

                },

                component: () => import(/* webpackChunkName: "myokrdetail" */ '../views/Okr/MyOkrDetail.vue'),

                children:[

                    {

                        //OKR列表

                        path: 'list',

                        name: 'OkrList',

                        component: () => import(/* webpackChunkName: "OkrList" */ '../views/Okr/OkrList.vue'),

                        meta: {

                            title: 'OKR列表',

                        },

                    },

                    {

                        //操作日志

                        path: 'log',

                        name: 'OprLog',

                        component: () => import(/* webpackChunkName: "OprLog" */ '../views/Okr/OprLog.vue'),

                        meta: {

                            title: '操作日志',

                        },

                    },

                ]

            },

            {

                //部门详情

                path: 'okr/team/detail/:id',

                name: 'TeamOkrDetail',

                meta: {

                    keepAlive: true,

                    title: '团队计划详情'

                },

                component: () => import(/* webpackChunkName: "teamokrdetail" */ '../views/Okr/TeamOkrDetail.vue'),

            },

            {

                path: '/okr/team/sub/detail/:id',

                name: 'Sub',

                meta: {

                    title:'团队个人计划详情',

                },

                component: () => import(/* webpackChunkName: "approval" */ '../views/Okr/MyOkrDetail.vue'),

                children:[

                    {

                        //OKR列表

                        path: 'list',

                        name: 'SubOkrList',

                        component: () => import(/* webpackChunkName: "OkrList" */ '../views/Okr/Detailed.vue'),

                        meta: {

                            title: 'OKR列表',

                        },

                    },

                    {

                        //操作日志

                        path: 'log',

                        name: 'SubOprLog',

                        component: () => import(/* webpackChunkName: "OprLog" */ '../views/Okr/OprLog.vue'),

                        meta: {

                            title: '操作日志',

                        },

                    },

                ]

            },

            {

                path: '/okr/approval',

                name: 'Approval',

                meta: {

                    title:'审核',

                },

                component: () => import(/* webpackChunkName: "approval" */ '../views/Okr/Approval.vue'),

            },

            {

                path: '/okr/approval/:id',

                name: 'Approval',

                meta: {

                    title:'审核',

                },

                component: () => import(/* webpackChunkName: "approval" */ '../views/Okr/MyOkrDetail.vue'),

                children:[

                    {

                        //OKR列表

                        path: 'list',

                        name: 'ApprovalOkrList',

                        component: () => import(/* webpackChunkName: "OkrList" */ '../views/Okr/Detailed.vue'),

                        meta: {

                            title: 'OKR列表',

                        },

                    },

                    {

                        //操作日志

                        path: 'log',

                        name: 'ApprovalOprLog',

                        component: () => import(/* webpackChunkName: "OprLog" */ '../views/Okr/OprLog.vue'),

                        meta: {

                            title: '操作日志',

                        },

                    },

4.同时详情页里还有两个子页面需要切换选中：代码

   

5.所有详情页共用一个上半部分，改变面包屑：