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

原创

已于 2022-11-09 17:53:37 修改 · 451 阅读

标签

#vue-cli3 #vue.js #前端

于 2020-11-12 14:53:20 首次发布

本文记录了一名前端新手在使用Vue+Element开发时遇到的路由问题，包括从列表页跳转到详情页，并根据ID区分不同状态的详情页（普通详情、审核详情和团队详情）。通过分析需求，详细介绍了如何设置路由以满足不同详情页的显示，并且提到了详情页内子页面的切换和面包屑导航的更新。

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列表',
                        },
                    },
                    {
   
   
                        //OKR列表
                        path: 'score',
                        name: 'OkrScore',
                        component: () => import(/* webpackChunkName: "OkrList" */ '../views/Okr/Score.vue'),
                        meta: {
   
   
                            title: '评分',
                        },
                    },
                    {
   
   
                        //操作日志
                        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

最低0.47元/天解锁文章