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>，作為子路由的插入點。訪問對應路由時候，會將該路由內容渲染到<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>

到此這篇關於vue自定義標籤和單頁面多路由實現的文章就介紹到這了,更多相關vue 自定義標籤單頁面多路由內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！