xzrkz-web/src/component/Nav.vue

<template>
    <div class="location">
        <div class="location-content">
            您的位置：
            <span class="nav" v-for="(nav, index) in navArray" :key="index">
                <router-link :to="nav.to" v-if="nav.to">{{ nav.name }}</router-link>
                <span v-else>{{ nav.name }}</span>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Nav',
    props: {
        navs: {
            type: Array,
            require: false,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            navArray: [
                {to: '/', name: '首页'},
                ...this.navs
            ]
        }
    }
}
</script>

<style lang="stylus" scoped>
.location
    background #e5e5e5
    line-height 30px

    .location-content
        margin 0 auto
        font-size 14px
        color #565656
        .nav::after
            content '>'
            margin  0 5px
        .nav:last-child::after
            content: ' '

@media (min-width: 1200px)
    .location-content 
        width 1200px
@media (max-width: 1200px)
    .location-content
        width 800px
</style>