vue自定義標(biāo)簽和單頁面多路由的實現(xiàn)代碼
1. 自定義組件標(biāo)簽（如在主頁插入頂欄/側(cè)邊欄等）
比如說要將Header.vue插入Home.vue中顯示：定義好Header.vue，然后在Home.vue的script中導(dǎo)入Header.vue：
import vHead from "./Header.vue"; #導(dǎo)入Header.vue為vHead，注意路徑， Header.vue和Home.vue 在同一路徑下用./
然后導(dǎo)出組件：
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自定義標(biāo)簽和單頁面多路由實現(xiàn)的文章就介紹到這了,更多相關(guān)vue 自定義標(biāo)簽單頁面多路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
學(xué)過 vue2 的小伙伴們肯定學(xué)習(xí)過偵聽器，主要是用來監(jiān)聽頁面數(shù)據(jù)或者是路由的變化，來執(zhí)行相應(yīng)的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣,本文就來為大家詳細(xì)講講2022-07-07
Vue2.0+Vux搭建一個完整的移動webApp項目的示例
這篇文章主要介紹了Vue2.0+Vux搭建一個完整的移動webApp項目的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue如何自定義InputNumber計數(shù)器組件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue使得大屏自適應(yīng)的多種方法,自適屏幕，始終保持16:9的比例，還一種是使用CSS scale屬性對大屏幕做自適應(yīng)處理，需要的朋友可以參考下2023-10-10
優(yōu)雅的elementUI table單元格可編輯實現(xiàn)方法詳解
這篇文章主要介紹了優(yōu)雅的elementUI table單元格可編輯實現(xiàn)方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue實現(xiàn)畫筆回放canvas轉(zhuǎn)視頻播放功能
這篇文章主要介紹了vue實現(xiàn)畫筆回放，canvas轉(zhuǎn)視頻播放功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue后臺管理添加多語言功能的實現(xiàn)示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了vue項目中input輸入框輸入不了值問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題
這篇文章主要介紹了vue3使用vue-cli引入windicss報錯Can‘t resolve windi.css問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在?Vue?3?中,動態(tài)組件是一種允許在運行時動態(tài)切換組件的機制,本文主要為大家詳細(xì)介紹了動態(tài)組件在Vue3中的具體使用,感興趣的小伙伴可以了解下2024-01-01