Javascript [Vue warn]：$attrs是只读的。[Vue warn]：$listeners是只读的

我是Vuejs的新手，每次按键都会收到以下警告：

[Vue warn]: $attrs is readonly.

found in

---> <RouterLink>
       <HeaderComponent> at src\components\Header_Component.vue
         <App> at src\App.vue
           <Root>

[Vue warn]：$attrs是只读的。
发现于
---> 
在src\components\Header\u Component.vue
从“Vue”导入Vue
导出默认Vue.extend({
数据（）{
返回{
logoTrue：{
"main":对,，
“项目”：错误，
"博客":错,，
“aboutme”：错，
“简历”：错误
},
梅因：没错，
标题：“”，
图像：“”，
h1:“，
h2:“，
导航：“，
标识：“，
休息：“，
}
},
组成部分：{
insta、facebook、github、codepen、mainLogo、mainLogo小型、测试、projectsLogo、blogsLogo、aboutmeLogo、resumeLogo
}
方法：{
addClass（）{
if（document.querySelector（'.h2Active'）==null和&document.querySelector（'.header\u top'）==null）{
这个。添加_newClasses（）
此.emit_已完成（true）
设置超时（（）=>{
这个。移除_分隔符（）
}, 800) 
}否则{
console.log（'类已经存在！'）
此.$emit（'reloadBackToTop'））
}        
},
拆下_分离器（）{
让breaker=document.getElementsByClassName（'分隔符'）
while（断路器[0]）{
this.nav.removeChild（断路器[0]）
}
},
setLogoTrue（目标）{
for（此.logoTrue中的var键）{
if（this.logoTrue.hasOwnProperty（键））{
如果（键==目标）{
this.logoTrue[键]=真
}否则{
this.logoTrue[键]=false
}
}
}
},
apply_topClasses（）{
this.header.classList.add（'header\u top'）
this.image.classList.add（'imgStatic\u top'）
this.h1.classList.add（'h1\u name\u top'）
this.h2.classList.add（'h2\u name\u top'）
this.logos.classList.add（'logo\u links\u top'）
this.nav.classList.add（'nav-side\u-top'）
此.emit_已完成（false）
},
添加新类（）{
如果（窗内宽度<1060）{
this.nav.classList.add（'navActive\u small'）
this.image.classList.add（'imgActive\u small'）
}否则{
this.nav.classList.add（'navActive'）
this.image.classList.add（'imgActive'）
}
this.logos.classList.add（'logo\u linksActive'））
this.header.classList.add（'headerActive'））
this.h1.classList.add（'h1Active'）
this.h2.classList.add（'h2Active'）
this.image.classList.remove（'imgStatic'））
},
发射完成（延迟：布尔值）{
如果（延迟）{
设置超时（（）=>{
此.$emit（'finishedload'））
console.log（'finished_loading'）
}, 2000)
}否则{
console.log（'here'）
此.$emit（'finishedload'））
}
},
调整客户端宽度（）{
如果（窗内宽度<1060）{
//这个。移除_分隔符（）
让bigActive=document.getElementsByClassName（'big-nav'）
让navActive=document.getElementsByCassName（'navActive'）
如果（bigActive.length>0）{
this.nav.classList.add（'small-nav'）
this.nav.classList.remove（'big-nav'））
this.image.classList.add（'small-img'））
this.image.classList.remove（'big-img'））
}否则，如果（navActive.length>0）{
this.nav.classList.add（'small-nav'）
this.nav.classList.remove（'nav-side'）
this.nav.classList.remove（'navActive'））
this.image.classList.add（'small-img'））
this.image.classList.remove（'imgActive'））
}
}否则{
让smallActive=document.getElementsByClassName（'small-nav'）
让smallnavActive=document.getElementsByClassName（'navActive\u small'）
如果（smallActive.length>0）{
this.nav.classList.add（'big-nav'））
this.nav.classList.remove（'small-nav'）
this.image.classList.add（'big-img'））
this.image.classList.remove（'small-img'））
}else if（smallnavActive.length>0）{
this.nav.classList.add（'big-nav'））
this.nav.classList.remove（'nav-side'）
this.nav.classList.remove（'navActive\u small'）
this.image.classList.add（'big-img'））
this.image.classList.remove（'imgActive\u small'）
}
}
}
},
已创建：函数（）{
window.addEventListener（'resize'，this.adjust_clientWidth）
},
挂载：函数（）{
this.header=document.getElementsByClassName（'header'）[0]
this.image=document.getElementsByClassName（'img'）[0]
this.h1=document.getElementsByClassName（'h1_name'）[0]
this.h2=document.getElementsByCassName（'h2_name'）[0]
this.nav=document.getElementsByClassName（'nav'）[0]
this.logos=document.getElementsByClassName（'logo_links'）[0]
if（window.location.hash！=“#/”）{
这个。移除_分隔符（）
if（window.location.hash==“#/Projects”）{
this.setLogoTrue（'project'））
}else if（window.location.hash.includes（“#/Blog”）||window.location.hash.includes（“#/Blog”））{
这个是
[Vue warn]: $listeners is readonly.

found in

---> <RouterLink>
       <HeaderComponent> at src\components\Header_Component.vue
         <App> at src\App.vue
           <Root>

<template>
    <header class="header">
        <div class='nav nav-side nav-oneLine'>
            <a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('project')" to='/Projects'>PROJECTS</router-link></a>
            <a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('blog')" to='/Blog'>BLOG</router-link></a>
            <a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('aboutme')" to='/Aboutme'>ABOUT ME</router-link></a>
            <a class='nav-link' href='#'><router-link @click.native="addClass(), setLogoTrue('resume')" to='/Resume'>RESUME</router-link></a>
        </div>
    </header>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
    data() {
        return{
            logoTrue: <Object> {
                'main': true,
                'project': false,
                'blog': false,
                'aboutme': false,
                'resume': false
            },
            main: <boolean>true,
            header: <any>"",
            image: <any>"",
            h1: <any>"",
            h2: <any>"",
            nav: <any>"",
            logos: <any>"",
            break: <any>"",
        }
    },
    components: {
        insta, facebook, github, codepen, mainLogo, mainLogoSmall, test, projectsLogo, blogsLogo, aboutmeLogo, resumeLogo
    }
    methods:{
        addClass(){
            if (document.querySelector('.h2Active') == null && document.querySelector('.header_top') == null) {
                this.add_newClasses()
                this.emit_finished(true)
                setTimeout(() => {
                    this.remove_separators()
                }, 800) 
            } else {
                console.log('classes already exist!')
                this.$emit('reloadBackToTop')
            }        
        },
        remove_separators() {
            let breaker = document.getElementsByClassName('separator')

            while (breaker[0]) {
                this.nav.removeChild(breaker[0])
            }
        },
        setLogoTrue(target) {
            for (var key in this.logoTrue) {
                if (this.logoTrue.hasOwnProperty(key)) {
                    if (key == target) {
                        this.logoTrue[key] = true
                    } else {
                        this.logoTrue[key] = false
                    }
                }
            }
        },
        apply_topClasses() {
            this.header.classList.add('header_top')
            this.image.classList.add('imgStatic_top')
            this.h1.classList.add('h1_name_top')
            this.h2.classList.add('h2_name_top')
            this.logos.classList.add('logo_links_top')
            this.nav.classList.add('nav-side_top')

            this.emit_finished(false)
        },
        add_newClasses() {
            if (window.innerWidth < 1060) {
                this.nav.classList.add('navActive_small')
                this.image.classList.add('imgActive_small')
            } else {
                this.nav.classList.add('navActive')
                this.image.classList.add('imgActive')
            }
            this.logos.classList.add('logo_linksActive')
            this.header.classList.add('headerActive')
            this.h1.classList.add('h1Active')
            this.h2.classList.add('h2Active')

            this.image.classList.remove('imgStatic')
        },
        emit_finished(delay:boolean) {
            if (delay) {
                setTimeout (() => {
                    this.$emit('finishedLoading')
                    console.log('finished_loading')
                }, 2000)
            } else {
                console.log('here')
                this.$emit('finishedLoading')
            }
        },
        adjust_clientWidth() {
            if (window.innerWidth < 1060) {
                // this.remove_separators()
                let bigActive = document.getElementsByClassName('big-nav')
                let navActive = document.getElementsByClassName('navActive')
                if (bigActive.length > 0) {
                    this.nav.classList.add('small-nav')
                    this.nav.classList.remove('big-nav')

                    this.image.classList.add('small-img')
                    this.image.classList.remove('big-img')

                } else if (navActive.length > 0) {
                    this.nav.classList.add('small-nav')
                    this.nav.classList.remove('nav-side')
                    this.nav.classList.remove('navActive')

                    this.image.classList.add('small-img')
                    this.image.classList.remove('imgActive')
                }
            } else {
                let smallActive = document.getElementsByClassName('small-nav')
                let smallnavActive = document.getElementsByClassName('navActive_small')
                if (smallActive.length > 0) {
                    this.nav.classList.add('big-nav')
                    this.nav.classList.remove('small-nav')

                    this.image.classList.add('big-img')
                    this.image.classList.remove('small-img')                     

                } else if (smallnavActive.length > 0) {
                    this.nav.classList.add('big-nav')
                    this.nav.classList.remove('nav-side')
                    this.nav.classList.remove('navActive_small')

                    this.image.classList.add('big-img')
                    this.image.classList.remove('imgActive_small')                    
                }
            }
        }
    },
    created: function() {
        window.addEventListener('resize',this.adjust_clientWidth)
    },
    mounted: function() {
        this.header = document.getElementsByClassName('header')[0]
        this.image = document.getElementsByClassName('img')[0]
        this.h1 = document.getElementsByClassName('h1_name')[0]
        this.h2 = document.getElementsByClassName('h2_name')[0]
        this.nav = document.getElementsByClassName('nav')[0]
        this.logos = document.getElementsByClassName('logo_links')[0]  

        if (window.location.hash != "#/") {
            this.remove_separators()
            if (window.location.hash == "#/Projects") {
                this.setLogoTrue('project')
            } else if (window.location.hash.includes("#/Blog") || window.location.hash.includes("#/blog")) {
                this.setLogoTrue('blog')
            } else if (window.location.hash == "#/Aboutme") {
                this.setLogoTrue('aboutme')
            } else if (window.location.hash == "#/Resume") {
                this.setLogoTrue('resume')
            }
            this.apply_topClasses()
        }
    }
})
</script>

<style lang="css" scoped>
(...)
</style>

<script lang="ts">
//import Vue from 'vue' <-- Commented the import line

export default {  // <-- Removed Vue.extend()
    data() {
        return{
            logoTrue: <Object> {
                'main': true,
                'project': false,
                'blog': false,
                'aboutme': false,
                'resume': false
            },
            main: <boolean>true,
            header: <any>"",
            image: <any>"",
            h1: <any>"",
            h2: <any>"",
            nav: <any>"",
            logos: <any>"",
            break: <any>"",
        }
    }
    ...more code...
}
</script>