基于Vue+Webpack拆分路由文件實(shí)現(xiàn)管理
事實(shí)是,如果你的項(xiàng)目不是特別大,一般是用不著分拆的。如果項(xiàng)目大了,那就需要考慮分拆路由了。其實(shí),這個(gè)操作并不復(fù)雜。
當(dāng)我們用 vue-cli 工具,創(chuàng)建一個(gè)新的 vue 項(xiàng)目時(shí),就已經(jīng)給大家新建好了一個(gè)路由文件 src/router/index.js ,內(nèi)容如下:
import Vue from ’vue’import Router from ’vue-router’import HelloWorld from ’@/components/HelloWorld’Vue.use(Router)export default new Router({ routes: [ { path: ’/’, name: ’HelloWorld’, component: HelloWorld } ]})
我們以這個(gè)文件為藍(lán)本,進(jìn)行調(diào)整。舉例,我們現(xiàn)在要新建一個(gè) news 的這個(gè)路由,然后這個(gè)路由下面,還有一些子路由,我們就可以這樣寫(xiě):
router/index.js 文件調(diào)整
// src/router/index.jsimport Vue from ’vue’import Router from ’vue-router’// 子路由視圖VUE組件import frame from ’@/frame/frame’import HelloWorld from ’@/components/HelloWorld’// 引用 news 子路由配置文件import news from ’./news.js’Vue.use(Router)export default new Router({ routes: [ { path: ’/’, name: ’HelloWorld’, component: HelloWorld }, { path: ’/news’, component: frame, children: news } ]})
如上,我們引入一個(gè)子路由視圖的 vue 組件,然后再引入 news 的子路由配置文件即可。下面我們來(lái)編寫(xiě)這兩個(gè)文件。
frame/frame 子路由視圖 vue 組件
<template><router-view /></template>
子路由視圖組件就異常簡(jiǎn)單了,如上,三行代碼即可,有關(guān) router-view 的相關(guān)內(nèi)容,請(qǐng)查看:
https://router.vuejs.org/zh/api/#router-view
router/news.js 子路由配置文件
其實(shí),配置這個(gè)文件和 vue 沒(méi)有什么關(guān)系,純粹就是 js es6 的導(dǎo)出和導(dǎo)入而已。
import main from ’@/page/news/main’import details from ’@/page/news/details’export default [ {path: ’’, component: main}, {path: ’details’, component: details}]
如上,即可。我們就完成了路由的多文件管理了。這樣看,是不是很簡(jiǎn)單呢?有什么問(wèn)題,請(qǐng)?jiān)谠u(píng)論中留言,我會(huì)抽時(shí)間答復(fù)大家。
更多內(nèi)容,請(qǐng)參考官方網(wǎng)站:https://router.vuejs.org/zh/
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. python爬蟲(chóng)beautifulsoup解析html方法2. Python 如何將integer轉(zhuǎn)化為羅馬數(shù)(3999以內(nèi))3. python 實(shí)現(xiàn)aes256加密4. 詳解Python模塊化編程與裝飾器5. css進(jìn)階學(xué)習(xí) 選擇符6. Python性能測(cè)試工具Locust安裝及使用7. 以PHP代碼為實(shí)例詳解RabbitMQ消息隊(duì)列中間件的6種模式8. 使用Python解析Chrome瀏覽器書(shū)簽的示例9. html小技巧之td,div標(biāo)簽里內(nèi)容不換行10. python web框架的總結(jié)
