Vue系列之 => 路由的巢狀
阿新 • • 發佈：2019-01-03
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" /> 8 <title>管理後臺</title> 9<script src="../lib/jquery2.1.4.min.js"></script> 10 <script src="../lib/Vue2.5.17.js"></script> 11 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 12 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 13<!-- 最新版本的 Bootstrap 核心 CSS 檔案 --> 14 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 15 crossorigin="anonymous"> 16 </head> 17 <style> 1819 </style> 20 21 <body> 22 <div id="app"> 23 <router-link to="/account">Account</router-link> 24 <router-view></router-view> 25 </div> 26 27 <template id="tmp1"> 28 <div> 29 <h1>這是 Account 元件</h1> 30 <router-link to="/account/login">登入</router-link> 31 <router-link to="/account/register">註冊</router-link> 32 <router-view></router-view> 33 </div> 34 </template> 35 36 <!-- 子元件 --> 37 <template id="login"> 38 <div> 39 <h1>登入一下</h1> 40 </div> 41 </template> 42 <template id="register"> 43 <div> 44 <h1>註冊一下</h1> 45 </div> 46 </template> 47 48 <script> 49 var login = { 50 template: '#login' 51 }; 52 53 var register = { 54 template: '#register' 55 }; 56 57 var account = { 58 template: '#tmp1' 59 }; 60 61 var routerObj = new VueRouter({ 62 routes: [{ 63 path: '/account', 64 component: account, 65 //正確的方法寫在children裡面 66 children : [ 67 { path : 'login' , component : login}, 68 { path : 'register' , component : register}, 69 ] 70 }, 71 72 // 錯誤方法 73 // { path : '/account/login' , component : login}, 74 // { path : '/account/register' , component : register}, 75 ] 76 }); 77 78 var vm = new Vue({ 79 el: '#app', 80 data: {}, 81 methods: { 82 83 }, 84 router: routerObj 85 }); 86 </script> 87 </body> 88 89 </html>