vue自定義標籤和單頁面多路由實現

1. 自定義組件標籤（如在主頁插入頂欄/側邊欄等）

比如說要將Header.vue插入Home.vue中顯示：定義好Header.vue，然後在Home.vue的script中導入Header.vue：

<code> import vHead from "./Header.vue";   #導入Header.vue為vHead，注意路徑，Header.vue和Home.vue在同一路徑下用.//<code>

然後導出組件：

<code>export default {
   components: {
     vHead,
   }
 };/<code>

然後即可在Home.vue的<template>中直接插入使用了： /<template>

<code> <vhead>/<code>

2. 單頁面多路由實現

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

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

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

<code>const routes = [ 
 { 

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

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

閱讀更多 BM小偉 的文章

關鍵字: 路由器 標籤 頁面