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

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

需求：

第一种：要求点击不同的导航跳转到另一个页面，在另一个页面上也有通用的导航，刚刚点击的那个导航应该处于选中状态（高亮）

<template>
    <div>
        <ul class="header-menu" ref="MainHeader" @mouseleave="handleLeaveMainHeader">
            <li v-for="(item,index) in nav_data" :key="index" :id="item.id" :class="{active:index === activeIndex}" 
            @mouseenter="setCurrentNav(index)">
                <a :href="item.url" target="_blank">{{item.name}}</a>
            </li>
            <span class="nav-underline" :style="currentNavStyle" style="opacity: 0;" ref="bar"></span>
        </ul>
    </div>
</template>

<script>
    export default{
        name:'RpNavHead',
        data() {
            return {
                activeNav:1,
                currentNavStyle:{
                    width:'0',
                    left:'0'
                },
                nav_data:[
                    {
                        id:'navWorkbench',
                        name:'工作台',
                        url:'//hc.hanmaker.com/app_common/index.php?m=workbench&a=index',
                    },
                    {
                        id:'navWorkReport',
                        name:'工作报告',
                        url:'//okr.hanmaker.com/#/myreport/wrtreport?source=1',
                    },
                    {
                        id:'navApproval',
                        name:'审批流程',
                        url:'//approval.hanmaker.com/approval-index',
                    },
                    {
                        id:'navYun',
                        name:'团队文档',
                        url:'//yun.hanmaker.com/index/personal/17',
                    },
                    {
                        id:'navWj',
                        name:'韩创问卷',
                        url:'//wj.hanmaker.com/survey#/home',
                    },
                    {
                        id:'navAssessment',
                        name:'评估',
                        url:'//okr.hanmaker.com/#/assessment/template?source=1',
                    },
                    {
                        id:'navOkr',
                        name:'OKR',
                        url:'//okr.hanmaker.com/#/okr/my?source=1',
                    }
                ]
            }
        },
        computed: {
            //通过路由与location计算，返回对应的index
            activeIndex(){
               let route_name  = this.$route.path;
               if(route_name.indexOf('/okr')==0){
                   return 6;
               }
               if(route_name.indexOf('/assessment')==0){
                   return 5;
               }
               if(this.$route.name == 'EditTemplate'){
                   if(this.$store.state.location == 'assess_template'){
                       return 5;
                   }
               }
                return 1;
            }
        },  
        methods: {
            setCurrentNav (index) {
                this.currentNav = index;
                let client = this.$refs.bar.getBoundingClientRect();
                this.currentNavStyle = this.getNavStyle(index);
            },
            getNavStyle (index) {
                let childNodes = this.$refs.MainHeader.childNodes;
                let width = childNodes[index].clientWidth+'px';
                let left = 0;
                if (index > 0) {
                    for (let i = 0; i < index; i++) {
                       left += childNodes[i].clientWidth
                    }
                }
                left +='px';
                let opacity = 0;
                if (opacity == 0){
                    opacity = 1;
                }else{
                    return false
                }
                return {width, left, opacity}
            },
            handleLeaveMainHeader () {
                let client = this.$refs.bar.getBoundingClientRect();
                this.currentNavStyle = {
                    width:'0',
                    left:client.left-240+(this.$refs.bar.clientWidth/2)+'px',
                }
                this.$forceUpdate();
            },
        },
    }
</script>

这段代码还涉及关于模拟layui导航hover跟随样式,仅供参考！

第二种：只有两个导航，在第一次根据链接进入时，选中的状态根据location判断：

<template>
    <el-container class="hc-container">
        <el-header class="hc-header">
            <rp-header/>
        </el-header>
        <el-container class="hc-container-body">
            <el-aside width="240px" class="hc-aside">
                <rp-side v-if="!isAssessment && !isOkr"/>
                <pg-side v-if="isAssessment"/>
                <okr-side v-if="isOkr"/>
            </el-aside>
            <!-- 移动端导航 -->
            <div class="admin-aside-nav">
                <div class="admin-aside-nav-body">
                    <ul>
                    //根据location判断
                        <li @click="cur=0" :class="{'is_active':location=='myreport'}">
                            <router-link class="nav-item" to="/myreport/wrtreport">
                                <span>我的报告</span>
                            </router-link>
                        </li>
                        //根据location判断
                        <li @click="cur=1" :class="{'is_active':location=='member'}">
                            <router-link class="nav-item" to="/member">
                                <el-badge :value="$store.state.report_count" :max="99" class="item"
                                          :hidden="$store.state.report_count==0">
                                    <span>成员报告</span>
                                </el-badge>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
            <el-main class="hc-main admin-main">
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    // @ is an alias to /src
    import RpHeader from '../components/RpHeader'
    import RpSide from '../components/RpSide'
    import PgSide from '../components/PgSide'
    import OkrSide from '../components/OkrSide'

    export default {
        name: 'Home',
        components: {
            RpHeader,
            RpSide,
            PgSide,
            OkrSide
        },
        data() {
            return {
                cur: 0,
                is_showSide: 1
            }
        },
        computed: {
            isAssessment() {
                if (this.$route.path.indexOf('assessment') >= 0) {
                    return true;
                }
                return false;
            },
            isOkr() {
                if (this.$route.path.indexOf('okr') >= 0) {
                    return true;
                }
                return false;
            },
            //把location传过来
            location(){
                return this.$store.state.location;
            }
        },
    }
</script>

<style scoped>
</style>