一、文件结构
二、vue.js
打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js
复制粘贴页面的所有内容
三、vue-router.js
打开此链接 https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js
复制粘贴页面的所有内容
四、index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>title</title> 8 </head> 9 <body> 10 <div id="app"> 11 12 <div> 13 path属性内传参 :name <br> 14 获取传参 {{$route.params.name}}<br> 15 16 url路径内传参 ？age = 18 & sex = 男（不需要加引号！）<br> 17 获取传参 {{$route.query.age}} {{$route.query.sex}}<br> 18 19 通过点击事件，设置setTimeout()方法，间隔时间后， 20 触发回调函数内的vue实例的router属性的push（）方法，实现手动路由<br> 21 第一种方式：<br> 22 setTimeout(function(){<br> 23 this.router.push("/username/汪")<br> 24 },2000);<br> 25 <br> 26 第二种方式：<br> 27 //传入一个对象，name属性表示路由的名字，params属性表示需要给哪个参数传值 28 //比如下面给名称为username_router的路由中path为/userMessage/:name/:age传参 29 setTimeout(function(){ <br> 30 this.router.push({name:"userMessage_router",params:{name:"汪",age=27}})<br> 31 },2000);<br> 32 <hr> 33 </div> 34 35 <!-- 上面是重点笔记，结合代码验证 --> 36 37 <router-link to="/login">login</router-link> 38 <router-link to="/user/王花花">王花花</router-link> 39 <button @click="surf">漫游</button> 40 <br> 41 <router-link to="/userMessage/未知/未知">我的信息</router-link> 42 <button @click="getMessage">点击获取</button> 43 44 <router-view></router-view> 45 </div> 46 47 48 49 <script src="../lib/vue.js"></script> 50 <script src="../lib/vue-router.js"></script> 51 <script src="js/app.js"></script> 52 </body> 53 </html>
五、app.js
1 var routes = [ 2 { 3 path:"/login", 4 component:{ 5 template:` 6 <h1> 7 登录 8 </h1> 9 ` 10 } 11 }, 12 { 13 path:"/user/:name", 14 name:"myrouter", 15 component:{ 16 template:` 17 <div> 18 我的名字叫{{$route.params.name}}<br> 19 今年{{$route.query.age}}岁了 <br> 20 我是{{$route.query.sex}}生 21 22 <router-link to="more" append>更多信息</router-link> 23 <router-view></router-view> 24 </div> 25 ` 26 }, 27 // 子路由的格式与父路由一样 28 children:[ 29 { 30 path:"more", 31 component:{ 32 // 子路由继承父路由的路径参数params 33 template:` 34 <div> 35 这是{{$route.params.name}}的详细信息：<br> 36 高配马公婆赶紧跑了啊东安街公安朵拉购IE的父</div> 37 ` 38 } 39 } 40 ] 41 }, 42 { 43 path:"/userMessage/:name/:age", 44 name:"userMessage_router", 45 component:{ 46 template:` 47 <div> 48 名字：{{$route.params.name}}<br> 49 年龄：{{$route.params.age}} 50 51 </div> 52 ` 53 } 54 } 55 56 ]; 57 58 var router = new VueRouter({ 59 routes 60 }); 61 62 // 设置时间，手动访问和传参 63 64 new Vue({ 65 el:"#app", 66 router, 67 methods:{ 68 surf:function(){ 69 // setTimeout()方法，第一个参数为回调函数， 70 // 第二个参数为间隔多少毫秒后，开始出发回调函数 71 setTimeout(function(){ 72 // this.router表示调用Vue实例内部的router属性，然后再调用其push()方法 73 // push（）方法内传入需要跳转的路由路径 74 this.router.push("/login"); 75 setTimeout(function(){ 76 // this.router.push("/user/汪"); 77 // 手动传参，传入一个对象，name属性表示路由的名字，params属性表示需要给哪个路径参数 78 // 传值 79 this.router.push({name:"myrouter",params:{name:"高富帅"}}); 80 },2000) 81 },2000) 82 }, 83 getMessage:function(){ 84 setTimeout(function(){ 85 // this.router.push("/userMessage/汪/27"); 86 this.router.push({name:"userMessage_router",params:{name:"汪汪",age:28}}) 87 },2000); 88 } 89 } 90 })
六、效果
七、谢谢观看，如有问题，随时交流哦