如何在Vue.js中将导入的组件用作a标签的href属性值

错误原因 #

• 你将Library组件注册到了components选项中，但模板中没有以<Library />的形式调用该组件，仅把导入的组件对象绑定给了href属性，Vue的组件使用校验规则就会触发「组件注册但未使用」的报错。
• a标签的href属性仅支持传入URL字符串，不能直接绑定组件对象，你的实现逻辑不符合原生属性和Vue的组件使用规则。

常见场景解决方案 #

场景1：点击a标签跳转到Library组件对应的页面 #

你需要先给Library组件配置路由规则，假设你用的是Vue Router，给Library分配的路由路径为/library，修改代码如下：

<template>
    <!-- 写法1：原生a标签 -->
    <a href="/library">跳转到Library页</a>
    <!-- 写法2：更推荐用Vue Router官方的router-link -->
    <router-link to="/library">跳转到Library页</router-link>
</template>

<script>
// 不需要在这里导入注册Library组件，路由配置里已经关联了组件
export default {
    name: "App"
}
</script>

<style>
    
</style>

场景2：点击a标签时在当前页渲染Library组件，不跳转 #

用变量控制组件的显隐即可，不需要用到href属性：

<template>
    <a @click.prevent="showLibrary = true">点击显示Library组件</a>
    <!-- 满足条件时渲染组件 -->
    <Library v-if="showLibrary" />
</template>

<script>
import Library from './Library';

export default {
    name: "App",
    components: {
        Library,
    },
    data() {
        return {
            showLibrary: false
        }
    }
}
</script>

<style>
    
</style>

内容的提问来源于stack exchange，提问作者EmielV