做了一个可以无限循环滑动的导航栏

Question

题目描述

现在想实现一个无限滑动的导航栏菜单，现在点击左右按钮是可以无限滚动了，页面一刷新，又回到首页了，现在如何让我点击别的图标，刷新之后不会返回首页啊？麻烦大神们啦！

题目来源及自己的思路

获取了data里的items的所有数据，然后用list去拿不超过五个值，数据有七个，每当我点击一个一个按钮，这个按钮就滑动到最中间，现在页面刷新的时候，便会回到主页上面去

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>

<div>
    <p v-for="(item, index) in list" class="vaCarousel-title" v-show="item.id === isStyle">{{item.conent}}</p>
    <div class="va-carousel" :style="{ width: width, height: height}" >
        
        <transition-group name="list" tag="div" class="image-list" :css="false" @before-enter="beforeEnter"  @enter="enter" @before-leave="beforeLeave" @leave="leave">
            <div class="image-item" :style="{width: itemWidth}" v-for="(item, index) in list" :class="{active: index === (total - 1) / 2}" :key="item.id">
                <router-link :class="{activeTo: index === (total - 1) / 2}" v-has="item.path" :to="{path:item.path}" @mousemove.native="selectedShow(item,index)" @mouseleave.native="selectedNone(item,index)"  @click.native="selectedItem(item, index)">
                    <icon :class="item.class" :name="item.name"></icon>
                </router-link>
            </div>

            <template arrow="true">
                <span key="prev" class="preview" @click="prev">
                    <slot name="prev">
                        <i class="el-icon-caret-left"></i>
                    </slot>
                </span>
                <span key="next" class="next" @click="next">
                    <slot name="next">
                        <i class="el-icon-caret-right"></i>
                    </slot>
                </span>
            </template>
        </transition-group>
    </div>
</div>

</template>

<script>

import Velocity from "velocity-animate"
export default {
    name: 'VACarousel',
    props: {
        total: {
            tyep: Number,
            default: 5
        },
        height: {
            type: String,
            default: '42px'
        },
        width: {
            type: String,
            default: '100%'
        },

        imgWidth: {
            type: String,
            default: '100%'
        },
        imgHeight: {
            type: String,
            default: '70%'
        },
        prevText: {
            type: String,
            default: 'prev'
        },
        nextText: {
            type: String,
            default: 'next'
        },

    },

    data() {
        return {
            list: [], // 当前显示的图片列表
            hover: false,
            timer: null,
            itemWidth: '',
            isReverse: false,
            isStyle: 3,
            items: [{
                    "path": '/Im',
                    "class": "im-icon",
                    "name": "im",
                    "id": 1,
                    "conent":"会话"
                },
                {
                    "path": '/Count',
                    "class": "count-icon",
                    "name": "count",
                    "id": 2,
                    "conent":"统计"
                },
                {
                    "path": '/home',
                    "class": "home-icon",
                    "name": "home",
                    "id": 3,
                    "conent":"主页"
                },
                {
                    "path": '/RoleAssignment',
                    "class": "wx-icon",
                    "name": "wx",
                    "id": 4,
                    "conent":"角色分配"
                },
                {
                    "path": '/Worklist',
                    "class": "worklist-icon",
                    "name": "worklist",
                    "id": 5,
                    "conent":"工单"
                },
                {
                    "path": '/WcmDome',
                    "class": "wcm-icon",
                    "name": "wcm",
                    "id": 6,
                    "conent":"知识库"
                },
                {
                    "path": '/Install',
                    "class": "install-icon",
                    "name": "install",
                    "id": 7,
                    "conent":"设置"
                }
            ],
            sessionItem:[]
        }
    },

    beforeMount() {
        this.itemWidth = 100 / this.total + '%';
        this.list = this.items.slice(0, this.total);
    },

    mounted() {
        
    },

    methods: {
        // 下一张
        next() {

// 如果图片列表小于需要显示的数量，则不进行滚动

            if(this.items < this.total) {
                return
            }

            // 向后追加一个元素，该元素为：
            //    显示列表中最后一个元素在原数组中的后一个元素
            //    如果已经是最后一个元素，则使用第一个元素

            let indexOfItems = this.items.findIndex(
                item => item.id === this.list[this.list.length - 1].id
            )

            if(indexOfItems === this.items.length - 1) {
                // 使用第一个元素
                this.list.push(this.items[0])
            } else {
                // 使用后一个元素
                this.list.push(this.items[indexOfItems + 1])
            }
            // 移除当前显示图片中的第一个
            this.list.shift();
            this.isReverse = false
        },

        // 上一张
        prev() {
            // 如果图片列表小于需要显示的数量，则不进行滚动
            if(this.items.length < this.total) {
                return
            }
            // 向前追加一个元素, 该元素为：
            //    当前展示列表中的第一个元素在原数组中的前一个元素
            //    如果已经是第一个元素，则使用最后一个元素
            let indexOfItems = this.items.findIndex(
                item => item.id === this.list[0].id
            )
            // console.log(indexOfItems)
            if(indexOfItems === 0) {
                this.list.unshift(this.items[this.sessionItem.length - 1])
            } else {
                this.list.unshift(this.items[indexOfItems - 1])
            }
            // 移除当前显示列表中的最后一个元素
            this.list.pop()
            this.isReverse = true
        },

        // 点击图片
        selectedItem(item, index) {
            this.$emit('selectedItem', item, index)
            this.isStyle = item.id;
            if(index == 1) {
                this.prev();
            } else if(index == 0) {
                this.prev();
                this.prev();
            } else if(index == 3) {
                this.next();
            } else if(index == 4) {
                this.next();
                this.next();
            } else {
                return
            }

        },
        selectedShow(item,index){
            this.isStyle = item.id;
        },
        selectedNone(item,index){
            this.isStyle = "";
        },
        handleMouseEnter() {
            this.hover = true
        },
        beforeEnter(el) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if(isImageItem) {
                el.style.opacity = 0
                if(this.isReverse) {
                    el.style.transform = 'translateX(-100%)'
                } else {
                    el.style.transform = 'translateX(100%)'
                }
            }
        },

        enter(el, done) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if(isImageItem) {
                Velocity(el, {
                    opacity: 1,
                    translateX: '0px'
                }, {
                    complate: done
                })
            } else {
                done()
            }
        },

        beforeLeave(el) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if(isImageItem) {
                el.style.position = 'absolute'
                if(this.isReverse) {
                    el.style.right = 0
                } else {
                    el.style.left = 0
                }
            }
        },

        leave(el, done) {
            // 只对image-item使用过渡
            let isImageItem = el.className.indexOf('image-item') > -1
            if(isImageItem) {
                el.style.opacity = 0
                if(this.isReverse) {
                    el.style.right = `-${this.itemWidth}`
                    // el.style.transform = 'translateX(100%)'
                } else {
                    el.style.transform = 'translateX(-100%)'
                }
                setTimeout(done, 1000)
            } else {
                done()
            }
        }
        // 列表过渡 end
    }
}

</script>

<style scope lang="scss">

.va-carousel {
    overflow: hidden;
    background: #253046;
    border-radius: 50px;
}
.vaCarousel-title{
    margin: 0 auto;
    padding: 2px;
    /*border: 1px solid red;*/
    width: 100%;
    font-size: 14px;
}
.image-list {
    width: 76%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    margin: 0 auto;
}

.image-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    cursor: pointer;
    transition: all 1s;
    position: relative;
}

.image-item.active {
    transform: scale(1.2);
}

.image-item p {
    position: absolute;
    left: 55px;
    bottom: -30px;
}

.image-item img {
    border-radius: 8px;
}

.preview,.next {
    position: absolute;
    font-size: 30px;
    color: white;
    cursor: pointer;
}
.preview:hover,.next:hover{
    color: #2D78BB;
}

.preview {
    left: -20px;
    transform: translateX(-100%);
}

.next {
    right: -20px;
    transform: translateX(100%);
}

.home-icon,
.im-icon,
.count-icon,
.install-icon,
.wcm-icon,
.worklist-icon,
.wx-icon {
    width: 30px;
    height: 30px;
    color: white;
}
.activeTo{
    svg{
        color: #2D78BB;
    }
}

</style>

你期待的结果是什么？实际看到的错误信息又是什么？

请问大神如何刷新页面，我点击的那个按钮显示在最中央