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