定义多组件
路由vue-router
場(chǎng)景模擬
現(xiàn)在我們來(lái)實(shí)現(xiàn)這樣一個(gè)功能：
一個(gè)頁(yè)面，包含登錄和注冊(cè)，點(diǎn)擊不同按鈕，實(shí)現(xiàn)登錄和注冊(cè)頁(yè)切換：
編寫父組件
為了讓接下來(lái)的功能比較清晰，我們先新建一個(gè)文件夾：src
然后新建一個(gè)HTML文件，作為入口：index.html
然后編寫頁(yè)面的基本結(jié)構(gòu)：
<div id="app"><span>登錄</span><span>注冊(cè)</span><hr/><div>登錄頁(yè)/注冊(cè)頁(yè)</div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script type="text/javascript">var vm = new Vue({el:"#app"}) </script>樣式：
編寫登錄及注冊(cè)組件
接下來(lái)我們來(lái)實(shí)現(xiàn)登錄組件，以前我們都是寫在一個(gè)文件中，但是為了復(fù)用性，開發(fā)中都會(huì)把組件放入獨(dú)立的JS文件中，我們新建一個(gè)user目錄以及l(fā)ogin.js及register.js：
編寫組件，這里我們只寫模板，不寫功能。
login.js內(nèi)容如下：
const loginForm = {template:'\<div>\<h2>登錄頁(yè)</h2> \用戶名：<input type="text"><br/>\密碼：<input type="password"><br/>\</div>\' }register.js內(nèi)容：
const registerForm = {template:'\<div>\<h2>注冊(cè)頁(yè)</h2> \用 戶 名：<input type="text"><br/>\密  碼：<input type="password"><br/>\確認(rèn)密碼：<input type="password"><br/>\</div>\' }在父組件中引用
<div id="app"><span>登錄</span><span>注冊(cè)</span><hr/><div><!--<loginForm></loginForm>--><!--疑問(wèn)：為什么不采用上面的寫法？由于html是大小寫不敏感的，如果采用上面的寫法，則被認(rèn)為是<loginform></loginform>所以，如果是駝峰形式的組件，需要把駝峰轉(zhuǎn)化為“-”的形式--><login-form></login-form><register-form></register-form></div> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script src="user/login.js"></script> <script src="user/register.js"></script> <script type="text/javascript">var vm = new Vue({el: "#app",components: {loginForm,registerForm}}) </script>效果：
問(wèn)題
我們期待的是，當(dāng)點(diǎn)擊登錄或注冊(cè)按鈕，分別顯示登錄頁(yè)或注冊(cè)頁(yè)，而不是一起顯示。
但是，如何才能動(dòng)態(tài)加載組件，實(shí)現(xiàn)組件切換呢？
雖然使用原生的Html5和JS也能實(shí)現(xiàn)，但是官方推薦我們使用vue-router模塊。
總結(jié)
