vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤：
- 准备一个根组件 vue.extend()；
- 需要做路由的内容准备 template；
- 准备路由 new VueRouter（）；
- 关联路由 map
- 启动路由 start(App,'#box')；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中
github上vue-router下载地址： https://github.com/vuejs/vue-router
关于路由跳转的简单代码如下：
vue-router 路由(根据url不同，出现不同效果，用0.1.13版本)
v-link //跳转链接
router-view //展示内容
1.)在外层定义一个id为box的div，用来以后绑定路由。在html中用v-link来绑定路由跳转的路径，例如：v-link="{path:'/home'}"
2.)准备根组件，为以后的绑定做准备。var App=Vue.extend();
3.)为每个路径定义要显示的内容，例：
var Home=Vue.extend({
template:'<h3>我是第一个a的内容页</h3>'
});
4.)准备路由 var router = new VueRouter();
5.)关联路由
router.map({
'home':{
component:Home
}
6.)启动路由 router.start(App,'#box');
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <script type="text/javascript" src="js/vue.js" ></script> 6 <script type="text/javascript" src="js/vue-router.js" ></script> 7 <script type="text/javascript" src="js/vue-resource.js" ></script> 8 <title></title> 9 </head> 10 <body> 11 <div id="box"> 12 <ul> 13 <li> 14 <a v-link="{path:'/home'}">我是第一个a</a> 15 </li> 16 <li > 17 <a v-link="{path:'news'}">我是第二个a</a> 18 </li> 19 </ul> 20 <div> 21 <router-view></router-view> 22 </div> 23 </div> 24 </body> 25 <script> 26 //1.准备一个根组件 27 var App=Vue.extend(); 28 29 //2.Home News 组件准备 30 var Home=Vue.extend({ 31 template:'<h3>我是第一个a的内容页</h3>' 32 }); 33 34 var News=Vue.extend({ 35 template:'<h3>我是第二个a的内容页</h3>' 36 }) 37 38 //3.准备路由 39 var router = new VueRouter(); 40 41 //4.关联 42 43 router.map({ 44 'home':{ 45 component:Home 46 }, 47 'news':{ 48 component:News 49 } 50 }) 51 52 //5.启动路由 53 54 router.start(App,'#box'); 55 </script> 56 </html>
如果要默认显示为home页，需要在启动路由前加
router.redirect({
'/':'/home'
});
路由嵌套路由
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <script type="text/javascript" src="js/vue.js" ></script> 6 <script type="text/javascript" src="js/vue-router.js" ></script> 7 <script type="text/javascript" src="js/vue-resource.js" ></script> 8 <title>路由嵌套</title> 9 <style> 10 .v-link-active{ 11 font-size: 20px; 12 color: red; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="box"> 18 <ul style="list-style: none;"> 19 <li style="float: left;"> 20 <a v-link="{path:'/home'}">我是第一个a</a> 21 </li> 22 <li style="float: left; margin: 0 30px;"> 23 <a v-link="{path:'news'}">我是第二个a</a> 24 </li> 25 </ul> 26 <br /> 27 <div> 28 <router-view></router-view> 29 </div> 30 </div> 31 <template id="home"> 32 <h3>home</h3> 33 <div> 34 <a v-link="{path:'/home/login'}">登陆</a> 35 <a v-link="{path:'/home/reg'}">注册</a> 36 </div> 37 <router-view></router-view> 38 </template> 39 <template id="news"> 40 <h3>news</h3> 41 </template> 42 </body> 43 <script> 44 //1.准备一个根组件 45 var App=Vue.extend(); 46 //2.Home News 组件准备 47 var Home=Vue.extend({ 48 template:'#home', 49 }); 50 var News=Vue.extend({ 51 template:'#news' 52 }) 53 //3.准备路由 54 var router = new VueRouter(); 55 //4.关联 56 router.map({ 57 'home':{ 58 component:Home, 59 subRoutes:{ 60 'login':{ 61 component:{ 62 template:'<p>你点击了登陆</p>' 63 } 64 }, 65 'reg':{ 66 component:{ 67 template:'<p>你点击了注册</p>' 68 } 69 } 70 } 71 }, 72 'news':{ 73 component:News 74 } 75 }) 76 //6.跳转路由默认显示为home 77 router.redirect({ 78 '/':'/home' 79 }); 80 //5.启动路由 81 router.start(App,'#box'); 82 </script> 83 </html>