【vue.js】藉助vue-router實現切換檢視（元件）的demo
阿新 • • 發佈：2019-02-19
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js"></script> <script src="vue-router.js"></script> </head> <body> <div id="app"> <div class="nav"> <router-link to="/mainPage">首頁</router-link> <router-link to="/games">小遊戲</router-link> <router-link to="/setting">個人設定</router-link> </div> <div id="content"> <router-view></router-view> </div> </div> </body> <script> const comp1={ template: ` <div>lalalalallalal</div> ` }; const comp2={ template:` <div>bababbabababbab</div> ` }; const comp3={ template:` <div>yayayayyayayay</div> ` }; const router=new VueRouter({ routes:[ { path:'/mainPage', component:comp1, }, { path:'/games', component:comp2, }, { path:'/setting', component:comp3, } ] }); const app=new Vue({ el:'#app', router:router, }); </script> </html>