vue-router路由器的使用
一、 vue-router路由
1、简介
1、为什么要用vue-router
使用Vue.js开发SPA（Single Page Application）单页面应用
2、什么是单页面应用
根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用
3、安装
bower info vue-router //查看版本信息
cnpm install vue-router -S//安装
2、基本用法
1、布局
显示内容
2、配置路由
创建路由四步骤：定义组件》》》配置路由》》》创建路由实例》》》路由挂载
3、示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由基本用法</title> <style> /* .router-link-active{ font-size:20px; color:#ff7300; text-decoration:none;//去除下划线 } */ .active{ font-size:20px; color:#ff7300; text-decoration:none; } </style> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="itany"> <div> <!-- 使用router-link组件来定义导航，to属性指定链接url ，router-link组件最终会变成a标签--> <router-link to="/home">主页</router-link> <router-link to="/news">新闻</router-link> </div> <div> <!-- router-view用来显示路由内容 --> <router-view></router-view> </div> </div> <script> //1.定义组件 var Home={ template:'<h3>我是主页</h3>' } var News={ template:'<h3>我是新闻</h3>' } //2.配置路由(路径和组件之间的关系) const routes=[ //routes是个数组，数组里的每一个对象都表示一个路由 {path:'/home',component:Home}, //路径home对应的组件内容是Home {path:'/news',component:News}, {path:'*',redirect:'/home'} //重定向，如果都找不到路由匹配就默认显示/home页面 ] //3.创建路由实例 const router=new VueRouter({ //VueRouter就是/vue-router.js里的 routes, //简写，相当于routes:routes // mode:'history', //更改模式，默认是hash模式，默认模式每个路径前面会有个#号 linkActiveClass:'active' //更新活动链接的class类名，后期好给链接改css样式 }); //4.创建根实例并将路由挂载到Vue实例上 new Vue({ el:'#itany', router //注入路由，相当于router：router }); </script> </body> </html>
3、 路由嵌套和参数传递
1、传参的两种形式：
1、查询字符串：login?name=tom&pwd=123 {{$route.query}}
2、rest风格url：regist/alice/456 {{$route.params}}
2、总结：
1、字符串形式传参流程：组件中传参》》》 template模板中通过{{$route.query}},直接获取
2、rest风格传参流程：组件中传参》》》路由中指定》》》template模板中通过 {{$route.params}}获取
3、路由实例的方法
1、router.push() 添加路由，功能上与<route-link>相同，区别就在于改方法更灵活，可以自由的修改
2、 router.replace() 替换路由，不产生历史记录
4、路由结合动画
略
5、示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由嵌套和参数传递</title> <link rel="stylesheet" href="css/animate.css"> <style> .active{ font-size:20px; color:#ff7300; text-decoration:none; } </style> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="itany"> <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> <hr> <button @click="push">添加路由</button> <button @click="replace">替换路由</button> </div> <template id="user"> <div> <h3>用户信息</h3> <ul> <router-link to="/user/login?name=tom&pwd=123" tag="li">用户登陆</router-link>//参数传递方式1，下面是方式2 <router-link to="/user/regist/alice/456" tag="li">用户注册</router-link>//<router-link默认被渲染成a标签，使用tag来指定被渲染成什么类型的标签 </ul> <router-view></router-view> </div> </template> <script> var Home={ template:'<h3>我是主页</h3>' } var User={ template:'#user' } var Login={ template:'<h4>用户登陆。。。获取参数：{{$route.query}},{{$route.path}}</h4>'//获取参数传递方式1的参数 } var Regist={ template:'<h4>用户注册。。。获取参数：{{$route.params}},{{$route.path}}</h4>'//获取参数传递方式2的参数 } const routes=[ {path:'/home',component:Home}, {path:'/user',component:User,children:[{path:'login',component:Login},{path:'regist/:username/:password',component:Regist}]},//路由嵌套+参数传递方式2的参数接收 {path:'*',redirect:'/home'} ] const router=new VueRouter({ routes, //简写，相当于routes:routes linkActiveClass:'active' //更新活动链接的class类名 }); new Vue({ el:'#itany', router, //注入路由 methods:{ push(){ router.push({path:'home'}); //添加路由，切换路由，实际上是做路由的跳转。 }, replace(){ router.replace({path:'user'}); //替换路由，没有历史记录，但是普通的router-link跳转是会有历史记录的。 } } }); </script> </body> </html>
