如何用Vue实现自定义标签和单页面多路由功能？

本文共计537个文字，预计阅读时间需要3分钟。

1. 自定义组件标签（如在主页插入顶栏/侧栏等）+ 例如：要将 Header.vue 插入 Home.vue 中显示：定义 Header.vue，然后在 Home.vue 的 script 中导入：import vHead from ./Header.vue;

1. 自定义组件标签（如在主页插入顶栏/侧边栏等）

  比如说要将Header.vue插入Home.vue中显示：定义好Header.vue，然后在Home.vue的script中导入Header.vue：

import vHead from "./Header.vue"; #导入Header.vue为vHead，注意路径， Header.vue和Home.vue 在同一路径下用./

然后导出组件：

export default { components: { vHead, } };

然后即可在Home.vue的<template>中直接插入使用了：

<vHead></vHead>

2. 单页面多路由实现

  单页面多路由就是在同一页面上显示不同路由的内容，通过设置为子路由的方式，然后通过<router-view></router-view>，作为子路由的插入点。