1. 自定義組件標簽（如在主頁插入頂欄/側(cè)邊欄等）

  比如說要將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. 單頁面多路由實現(xiàn)

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

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

1.通過設(shè)置./router/index.js路由中的children屬性，設(shè)置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頁面相應(yīng)位置添加<router-view></router-view>，訪問對應(yīng)路由/homedesk時，即會將該路由內(nèi)容渲染到HomeDesk.vue對應(yīng)位置。

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