vue中，有一個類庫叫做vue-router，是用來做單頁面路由的。做路由一般分為四個步驟：
準備一個根組件 vue.extend()； 需要做路由的內容準備 template； 準備路由 new VueRouter（）； 關聯路由 map 啟動路由 start(App,'#box')；//第一個參數是準備的根組件，第二個參數是要捆綁的位置就是自己定義的id中github上vue-router下載地址：https://github.com/vuejs/vue-router
關于路由跳轉的簡單代碼如下：
<!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'}">我是第一個a</a> </li> <li > <a v-link="{path:'news'}">我是第二個a</a> </li> </ul> <div> <router-view></router-view> </div> </div> </body> <script> //1.準備一個根組件 var App=Vue.extend(); //2.Home News 組件準備 var Home=Vue.extend({ template:'<h3>我是第一個a的內容頁</h3>' }); var News=Vue.extend({ template:'<h3>我是第二個a的內容頁</h3>' }) //3.準備路由 var router = new VueRouter(); //4.關聯 router.map({ 'home':{ component:Home }, 'news':{ component:News } }) //5.啟動路由 router.start(App,'#box'); </script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
