vue-路由
阿新 • • 發佈：2017-08-24
meta code pan () xtend src ews htm art
1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.js"></script> <style></style> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:‘/home‘}">主頁</a> </li> <li> <a v-link="{path:‘/news‘}">新聞</a> </li></ul> <div> <router-view></router-view> </div> </div> <script> //1. 準備一個根組件 var App=Vue.extend(); //2. Home News組件都準備 var Home=Vue.extend({ template:‘<h3>我是主頁</h3>‘ }); var News=Vue.extend({ template:‘<h3>我是新聞</h3>‘ }); //3. 準備路由 var router=new VueRouter(); //4. 關聯 router.map({ ‘home‘:{ component:Home }, ‘news‘:{ component:News } }); //5. 啟動路由 router.start(App,‘#box‘); </script> </body> </html>
2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.js"></script> <style> </style> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:‘/home‘}">主頁</a> </li> <li> <a v-link="{path:‘/news‘}">新聞</a> </li> </ul> <div> <router-view></router-view> </div> </div> <script> //1. 準備一個根組件 var App=Vue.extend(); //2. Home News組件都準備 var Home=Vue.extend({ template:‘<h3>我是主頁</h3>‘ }); var News=Vue.extend({ template:‘<h3>我是新聞</h3>‘ }); //3. 準備路由 var router=new VueRouter(); //4. 關聯 router.map({ ‘home‘:{ component:Home }, ‘news‘:{ component:News } }); //5. 啟動路由 router.start(App,‘#box‘); //6. 跳轉 router.redirect({ ‘/‘:‘/home‘ }); </script> </body> </html>
3.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/vue/dist/vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.js"></script> <style> </style> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:‘/home‘}">主頁</a> </li> <li> <a v-link="{path:‘/news‘}">新聞</a> </li> </ul> <div> <router-view></router-view> </div> </div> <script> //1. 準備一個根組件 var App=Vue.extend(); //2. Home News組件都準備 var Home=Vue.extend({ template:‘<h3>我是主頁</h3>‘ }); var News=Vue.extend({ template:‘<h3>我是新聞</h3>‘ }); //3. 準備路由 var router=new VueRouter(); //4. 關聯 router.map({ ‘home‘:{ component:Home }, ‘news‘:{ component:News } }); //5. 啟動路由 router.start(App,‘#box‘); //6. 跳轉 router.redirect({ ‘/‘:‘home‘ }); </script> </body> </html>
vue-路由