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