vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼

更新時(shí)間：2020年05月03日 11:21:32 作者：segmentfault

這篇文章主要介紹了vue自定義標(biāo)簽和單頁(yè)面多路由的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1. 自定義組件標(biāo)簽（如在主頁(yè)插入頂欄/側(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>中直接插入使用了：

2. 單頁(yè)面多路由實(shí)現(xiàn)

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

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

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è)面相應(yīng)位置添加<router-view></router-view>，訪問對(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)文章

vue全局掛載實(shí)現(xiàn)APP全局彈窗的示例代碼
本文主要介紹了vue全局掛載實(shí)現(xiàn)APP全局彈窗的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
在Vue中使用Echarts+封裝
這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下
2023-11-11
vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue 3中的defineEmits()和defineProps()使用小結(jié)
defineProps()和defineEmits()是Vue 3中Composition API的重要組成部分,它們分別用于定義組件接收的屬性和觸發(fā)的事件,本文給大家介紹Vue 3中的defineEmits()和defineProps()解析,感興趣的朋友跟隨小編一起看看吧
2024-04-04
vue 彈出框引入另一個(gè)vue頁(yè)面的示例代碼
這篇文章主要介紹了vue 彈出框引入另一個(gè)vue頁(yè)面,這種方式適用于在一個(gè)頁(yè)面邏輯比較多的時(shí)候,可以搞多個(gè)頁(yè)面,防止出錯(cuò),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解
這篇文章主要介紹了Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
詳解vue2.6插槽更新v-slot用法總結(jié)
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。這篇文章主要介紹了詳解vue2.6插槽更新v-slot用法總結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-03-03
elementui之封裝下載模板和導(dǎo)入文件組件方式
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的解決方案
這篇文章主要介紹了vue查詢數(shù)據(jù)el-table不更新數(shù)據(jù)的問題及解決方案，本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-12-12
vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名
這篇文章主要介紹了vue 使用 canvas 實(shí)現(xiàn)手寫電子簽名功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-03-03