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>

vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

2. 單頁面多路由實現

單頁面多路由就是在同一頁面上顯示不同路由的內容，通過設置為子路由的方式，然后通過 <router-view></router-view>，作為子路由的插入點。訪問對應路由時候，會將該路由內容渲染到<router-view></router-view>位置。

比如：要在Home.vue頁面上顯示HomeDesk.vue等頁面:

1.通過設置./router/index.js路由中的children屬性，設置HomeDesk.vue為Home.vue的子路由：  

const routes = [ 
 {
   path: '/', name: 'home', component: () => import('../components/common/Home.vue'), #注意引用路徑 children: [ { path: '/homedesk', name: 'homedesk', component: () => import('../components/page/HomeDesk.vue') #注意引用路徑 },}]

2.在HomeDesk.vue頁面相應位置添加<router-view></router-view>，訪問對應路由/homedesk時，即會將該路由內容渲染到HomeDesk.vue對應位置。