一、路由实例的方法
1、router.push() 添加路由，功能与<router-link>相同
2、router.push() 替换路由，不会产生历史记录
二、代码实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由参数传递</title> 6 <style> 7 /*设置链接点击后的颜色*/ 8 .active{ 9 color: red; 10 font-size: 24px; 11 /*去除下划线*/ 12 text-decoration: none; 13 } 14 </style> 15 <!--引入vue--> 16 <script src="../js/vue.js"></script> 17 <!-- 引入vue-router --> 18 <script src="../js/vue-router.min.js"></script> 19 </head> 20 <body> 21 22 <div id="hello"> 23 <div> 24 <!-- 使用router-link组件来定义导航，to属性指定链接url --> 25 <router-link to='/home'>主页</router-link> 26 <router-link to='/news'>新闻</router-link> 27 <router-link to='/user'>用户</router-link> 28 </div> 29 <div> 30 <!-- router-view用来显示路由内容 --> 31 <router-view></router-view> 32 </div> 33 </div> 34 35 <template id="user"> 36 <div> 37 <h4>用户信息</h4> 38 <ul> 39 <li><router-link to='/user/login?name=tom&psw=123'>登录</router-link></li> 40 <li><router-link to='/user/regist/alice/456'>注册</router-link></li> 41 </ul> 42 <!-- router-view用来显示路由内容 --> 43 <router-view></router-view> 44 45 <!-- 添加路由 --> 46 <button @click='backToHome'>跳转到首页</button> 47 <!-- 替换路由 --> 48 <button @click='replaceToHome'>替换到首页</button> 49 </div> 50 </template> 51 52 <script> 53 //1.定义组件 54 var Home={ 55 template:'<h3>我是主页</h3>' 56 } 57 var News={ 58 template:'<h3>我是新闻</h3>' 59 } 60 var User={ 61 template:'#user', 62 methods:{ 63 backToHome(){ 64 router.push({path:'/home'}); //添加路由，跳转到home页面 65 }, 66 replaceToHome(){ 67 router.replace({path:'/home'}); //替换路由，替换到home页面 68 }, 69 70 } 71 } 72 var Login={ 73 template:'<h5>用户登录的界面 用户名：{{$route.query.name}} 密码：{{$route.query.psw}}</h5>' 74 } 75 var Regist={ 76 template:'<h5>用户注册的界面 用户名：{{$route.params.username}} 密码：{{$route.params.password}}</h5>' 77 } 78 79 //2.配置路由 80 const routes=[ 81 {path:'/home',component:Home}, 82 {path:'/news',component:News}, 83 { 84 path:'/user', 85 component:User, 86 children:[ //配置子路由 87 {path:'login',component:Login}, 88 {path:'regist/:username/:password',component:Regist} 89 ] 90 }, 91 {path:'*',redirect:'/home'} //路由重定向，实现默认显示首页 92 ] 93 94 //3.创建路由实例 95 const router=new VueRouter({ 96 routes:routes, //第一个routes是选项，第二个routes是配置路由时自定义的变量名。二者同名，可以直接简写为routes 97 mode:'history', //路由的模式设置为history（默认为hash模式） 98 linkActiveClass:'active' //更改活动链接的class类名 99 }); 100 101 //4.将创建的路由实例挂载到Vue实例上 102 let vm = new Vue({ 103 el:'#hello', 104 router:router, //第一个router是选项，第二个router是创建路由实例时自定义的变量名。二者同名，可以直接简写为router 105 }); 106 </script> 107 </body> 108 </html>
三、效果展示
