vue+ element 小白初次实践踩坑（一）-路由与loca
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.同时详情页里还有两个子页面需要切换选中：代码
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="OKR列表" name="OkrList"></el-tab-pane>
<el-tab-pane label="操作日志" name="OprLog"></el-tab-pane>
</el-tabs>
</template>
<script>
export default {
name: 'OkrNav',
created() {
// this.$store.commit('setLocation', 'okr_my');
let route_name = this.$route.name;
route_name = route_name.replace('Approval','');
this.activeName = route_name.replace('Sub','');
},
activated() {
this.activeName = this.$route.name
},
data() {
return {
activeName: 'OkrList',
}
},
methods: {
handleClick(tab) {
let {name} = tab;
let url = '';
switch (name) {
case 'OkrList':
url = 'list'
break;
case 'OprLog':
url = 'log'
break;
}
this.$router.push(url);
},
}
}
</script>
5.所有详情页共用一个上半部分，改变面包屑：
<template>
<div>
<el-row class="hidden-xs-only">
<el-col>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-if="location=='okr_my'" to="okr/my">我的OKR</el-breadcrumb-item>
<el-breadcrumb-item v-if="location=='okr_team'" to="okr/team">团队OKR</el-breadcrumb-item>
<el-breadcrumb-item v-if="location=='okr_approval'" to="okr/approval">计划审核</el-breadcrumb-item>
<el-breadcrumb-item>{{plan.creator.full_name+'的'+plan.name}}</el-breadcrumb-item>
</el-breadcrumb>
</el-col>
</el-row>
<rp-card>
<div class="title">
{{plan.creator.full_name+'的'+plan.name}}
<span v-if="plan.status == 1" style="color: #909399">· 未提交</span>
<span v-if="plan.status == 2" style="color: #E6A23C">· 审核中</span>
<span v-if="plan.status == 3" style="color: #67C23A">· 进行中</span>
<span v-if="plan.status == 5" style="color: #303133">· 已完成</span>
<span v-if="plan.status == 4" style="color: #F56C6C">· 被驳回</span>
</div>
<okr-nav></okr-nav>
</rp-card>
<rp-card>
<router-view/>
</rp-card>
</div>
</template>
<script>
import RpCard from '@/components/RpCard';
import OkrNav from '@/components/OkrNav'
export default {
name:'MyOkrDetail',
components: {
RpCard,
OkrNav
},
created() {
this.plan_id = this.$route.params.id;
//this.getOkrList();
},
data () {
return {
levelList: [],
plan_id:'',
plan:{
name:'',
creator:{
full_name:'',
},
}
}
},
computed: {
location(){
return this.$store.state.location;
}
},
methods: {
//获取数据
getOkrList() {
let _this = this;
_this.$api.get('/okr/objective', {plan_id:_this.plan_id}, res => {
if (res.errcode == 0) {
_this.plan = res.data.plan;
}
})
},
setPlan(plan){
this.plan = plan;
}
},
}
</script>
