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>，訪問對應路由/homedesk時，即會將該路由內容渲染到HomeDesk.vue對應位置。

到此這篇關于vue自定義標簽和單頁面多路由實現的文章就介紹到這了,更多相關vue 自定義標簽單頁面多路由內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！