快捷導(dǎo)航

Vue-router 類似Vuex實(shí)現(xiàn)組件化開(kāi)發(fā)的示例

更新時(shí)間：2017年09月15日 10:10:38 作者：東京的雨不會(huì)淋濕首爾

本篇文章主要介紹了Vue-router 類似Vuex實(shí)現(xiàn)組件化開(kāi)發(fā)的示例，具有一定的參考價(jià)值，有興趣的可以了解一下

本文介紹了Vue-router 類似Vuex實(shí)現(xiàn)組件化開(kāi)發(fā)的示例，分享給大家，具體如下：

隨著項(xiàng)目越來(lái)越大，把所有route寫在一個(gè)文件里就顯得雜亂。

#單個(gè)組件路由
import a from '../components/a'
export default {
 path: '/a',
 name: 'a',
 component: a
}
import arouter from 'xxx'
export default new Router({
 routes: [
   arouter
 ]
})

#多個(gè)組件路由
import a from '../components/a'
import b from '../components/b'
export default [{
 path: '/a',
 name: 'a',
 component: a
}, {
 path: '/b',
 name: 'b',
 component: b
}]
#arouter.js
export default new Router({
 routes: [
  ...arouter//擴(kuò)展運(yùn)算符
 ]
})

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+Vue Router多級(jí)側(cè)導(dǎo)航切換路由(頁(yè)面)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+Vue Router多級(jí)側(cè)導(dǎo)航切換路由(頁(yè)面)的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能
在做后臺(tái)管理系統(tǒng)項(xiàng)目的時(shí)候,產(chǎn)品增加了一個(gè)在Select選擇器中添加一鍵全選和清空的功能,他又不讓在外部增加按鈕,其實(shí)如果說(shuō)在外部增加按鈕實(shí)現(xiàn)全選或者清空的話,功能比較簡(jiǎn)單的,下面給大家分享Vue3+Ant?design?實(shí)現(xiàn)Select下拉框一鍵全選/清空功能,需要的朋友可以參考下
2024-05-05
vue中created、watch和computed的執(zhí)行順序詳解
由于vue的雙向數(shù)據(jù)綁定,自動(dòng)更新數(shù)據(jù)的機(jī)制,在數(shù)據(jù)變化后,對(duì)此數(shù)據(jù)依賴?的所有數(shù)據(jù),watch事件都會(huì)被更新、觸發(fā),下面這篇文章主要給大家介紹了關(guān)于vue中created、watch和computed的執(zhí)行順序,需要的朋友可以參考下
2022-11-11
Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加行的表格步驟詳解
在Vue組件中定義表格的數(shù)據(jù)模型,通常使用一個(gè)數(shù)組來(lái)存儲(chǔ)表格的數(shù)據(jù),每一行數(shù)據(jù)可以是一個(gè)對(duì)象,對(duì)象的屬性對(duì)應(yīng)表格的列,這篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)動(dòng)態(tài)添加行的表格步驟詳解,需要的朋友可以參考下
2024-05-05
Element el-table的formatter和scope?template不能同時(shí)存在問(wèn)題解決辦法
本文主要介紹了ElementUI?el-table?的?formatter?和?scope?template?不能同時(shí)存在問(wèn)題解決辦法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
前端vue3樹形組件使用代碼示例
最近在開(kāi)發(fā)時(shí)遇到一個(gè)問(wèn)題,是在輸入框里面放一個(gè)樹形組件,這篇文章主要給大家介紹了關(guān)于前端vue3樹形組件使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題
這篇文章主要介紹了淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08
Vue手機(jī)號(hào)正則匹配姓名加密展示功能的實(shí)現(xiàn)
這篇文章主要介紹了Vue手機(jī)號(hào)正則匹配，姓名加密展示,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
VUE使用canvas實(shí)現(xiàn)簽名組件
這篇文章主要為大家詳細(xì)介紹了VUE使用canvas實(shí)現(xiàn)簽名組件，兼容PC移動(dòng)端，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
這篇文章主要介紹了vue router下的html5 history在iis服務(wù)器上的設(shè)置方法，需要的朋友參考下吧
2017-10-10