溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了如何實現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>，作為子路由的插入點。訪問對應路由時候，會將該路由內容渲染到<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自定義標簽和單頁面多路由的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
