vue中,有一個(gè)類庫叫做vue-router,是用來做單頁面路由的。做路由一般分為四個(gè)步驟:
github上vue-router下載地址:https://github.com/vuejs/vue-router
關(guān)于路由跳轉(zhuǎn)的簡單代碼如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/vue-router.js" ></script> <script type="text/javascript" src="js/vue-resource.js" ></script> <title></title> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:'/home'}">我是第一個(gè)a</a> </li> <li > <a v-link="{path:'news'}">我是第二個(gè)a</a> </li> </ul> <div> <router-view></router-view> </div> </div> </body> <script> //1.準(zhǔn)備一個(gè)根組件 var App=Vue.extend(); //2.Home News 組件準(zhǔn)備 var Home=Vue.extend({ template:'<h3>我是第一個(gè)a的內(nèi)容頁</h3>' }); var News=Vue.extend({ template:'<h3>我是第二個(gè)a的內(nèi)容頁</h3>' }) //3.準(zhǔn)備路由 var router = new VueRouter(); //4.關(guān)聯(lián) router.map({ 'home':{ component:Home }, 'news':{ component:News } }) //5.啟動路由 router.start(App,'#box'); </script></html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答