vue2.0 路由: http://router.vuejs.org/zh-cn/index.html 基本使用: 1. 布局 <router-link to="/home">主页</router-link> <router-view></router-view> 2. 路由具体写法 //组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻</h3>' }; //配置路由 const routes=[ {path:'/home', componet:Home}, {path:'/news', componet:News}, ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, el:'#box' }); 3. 重定向 之前 router.rediect 废弃了 {path:'*', redirect:'/home'} ------------------------------------------ 路由嵌套: /user/username const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ //核心 {path:'username', component:UserDetail} ] }, {path:'*', redirect:'/home'} //404 ]; ------------------------------------------ /user/strive/age/10 :id :username :age ------------------------------------------ 路由实例方法: router.push({path:'home'}); //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个 router.replace({path:'news'}) //替换路由，不会往历史记录里面添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .router-link-active{ font-size: 20px; color:#f60; } </style> <script src="vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.min.js"></script> </head> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </div> <div> <router-view></router-view> </div> </div> <script> //组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻</h3>' }; //配置路由 const routes=[ {path:'/home', component:Home}, {path:'/news', component:News}, {path:'*', redirect:'/home'} //跳转 ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, el:'#box' }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .router-link-active{ font-size: 20px; color:#f60; } </style> <script src="vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.min.js"></script> </head> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <router-view></router-view> </div> </div> <script> //组件 var Home={ template:'<h3>我是主页</h3>' }; var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li><router-link to="/user/username">某个用户</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` }; var UserDetail={ template:'<div>我是XX用户</div>' }; //配置路由，路由嵌套 const routes=[ {path:'/home', component:Home}, { <!--父路由--> path:'/user', component:User, children:[ {path:'username', component:UserDetail}<!--子路由--> ] }, {path:'*', redirect:'/home'} //404 ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, el:'#box' }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .router-link-active{ font-size: 20px; color:#f60; } </style> <script src="vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.min.js"></script> </head> <body> <div id="box"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <router-view></router-view> </div> </div> <script> //组件 var Home={ template:'<h3>我是主页</h3>' }; var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li><router-link to="/user/strive/age/10">Strive</router-link></li> <li><router-link to="/user/blue/age/80">Blue</router-link></li> <li><router-link to="/user/eric/age/70">Eric</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` }; var UserDetail={ template:'<div>{{$route.params}}</div>' <!-- { "username": "strive", "age": "10" } --> }; //配置路由 const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ {path:':username/age/:age', component:UserDetail} ] }, {path:'*', redirect:'/home'} //404 ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, el:'#box' }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .router-link-active{ font-size: 20px; color:#f60; } </style> <script src="vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.min.js"></script> </head> <body> <div id="box"> <input type="button" value="添加一个路由" @click="push"> <input type="button" value="替换一个路由" @click="replace"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <router-view></router-view> </div> </div> <script> //组件 var Home={ template:'<h3>我是主页</h3>' }; var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li><router-link to="/user/strive/age/10">Strive</router-link></li> <li><router-link to="/user/blue/age/80">Blue</router-link></li> <li><router-link to="/user/eric/age/70">Eric</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` }; var UserDetail={ template:'<div>{{$route.params}}</div>' }; //配置路由 const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ {path:':username/age/:age', component:UserDetail} ] }, {path:'*', redirect:'/home'} //404 ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, methods:{ push(){ router.push({path:'home'}); }, replace(){ router.replace({path:'user'}); } } }).$mount('#box'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>智能社——http://www.zhinengshe.com</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> .router-link-active{ font-size: 20px; color:#f60; } </style> <script src="vue.js"></script> <script src="bower_components/vue-router/dist/vue-router.min.js"></script> <link rel="stylesheet" href="animate.css"> </head> <body> <div id="box"> <input type="button" value="添加一个路由" @click="push"> <input type="button" value="替换一个路由" @click="replace"> <div> <router-link to="/home">主页</router-link> <router-link to="/user">用户</router-link> </div> <div> <transition enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight"> <router-view></router-view> </transition> </div> </div> <script> //组件 var Home={ template:'<h3>我是主页</h3>' }; var User={ template:` <div> <h3>我是用户信息</h3> <ul> <li><router-link to="/user/strive/age/10">Strive</router-link></li> <li><router-link to="/user/blue/age/80">Blue</router-link></li> <li><router-link to="/user/eric/age/70">Eric</router-link></li> </ul> <div> <router-view></router-view> </div> </div> ` }; var UserDetail={ template:'<div>{{$route.params}}</div>' }; //配置路由 const routes=[ {path:'/home', component:Home}, { path:'/user', component:User, children:[ {path:':username/age/:age', component:UserDetail} ] }, {path:'*', redirect:'/home'} //404 ]; //生成路由实例 const router=new VueRouter({ routes }); //最后挂到vue上 new Vue({ router, methods:{ push(){ router.push({path:'home'}); }, replace(){ router.replace({path:'user'}); } } }).$mount('#box'); </script> </body> </html>