Vue HTML路由(每個內容都拆分版)
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 別忘了導包 --> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script> </head> <body> <div id="box"> <ul> <li> <!-- 跳轉顯示不同的元件用router-link,to是元件的地址。在routes裡配置 --> <router-link to="/home">首頁</router-link> </li> <li> <router-link to="/new">新聞</router-link> </li> <li> <router-link to="/hot">熱點</router-link> </li> </ul> <!-- router-view是元件顯示的地方 --> <div><router-view></router-view></div> </div> <!-- 自定義元件模板 --> <template id="home"> <div> <ul> <li>首頁的1</li> <li>首頁的2</li> </ul> </div> </template> <template id="new"> <div>新聞頁</div> </template> <template id="hot"> <div>熱點頁</div> </template> <script> //總思想：把各個元件都拆分開來 順序是:自定義元件模板template(定義模板內容)→routes(繫結地址)→ //VueRouter(繫結routes屬性)→最後到Vue(繫結VueRouter) //先繫結template元件模板,用Vue.extend方法 var Home=Vue.extend({template:"#home"}); var New=Vue.extend({template:"#new"}); var Hot=Vue.extend({template:"#hot"}); //再把VueRouteer內的routes給繫結賦值(把地址和元件模板繫結起來) var routes=[ { path:"/home", component:Home }, { path:"/new", component:New }, { path:"/hot", component:Hot } ]; //把VueRouter繫結routes屬性，一層連一層 var router=new VueRouter({ routes:routes /*這裡可以簡寫成routes。*/ }); var vm=new Vue({ el:"#box", router:router /*這裡也可以簡寫成router*/ }); </script> </body> </html>