Vue自定义标签

网站导航或者页脚之类的经常复用,自定义标签后直接调用方便不少,本例自定义一个<my-footer/>标签,下面是方法:

在components文件夹下面新建文件Footer.vue,输入代码

<div class="footer">
        <ul>
            <li>
                <router-link :to="{name:'home'}">
                        <div class="nav"><p>首页</p></div>
                </router-link>
            </li>
            <li>
                <router-link :to="{name:'category'}">
                         <div class="nav"><p>分类</p></div>
                </router-link>
            </li>
        </ul>
    </div>

在main.js里面插入代码
import Footer from '@/components/Footer.vue'
Vue.component('my-footer', Footer)
在需要使用的页面中直接键入标签
<my-footer/>