一、文件结构

二、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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>title</title>

 </head>

 <body>

    <div id="app">

         <div>

             path属性内传参  :name <br>

             获取传参  {{$route.params.name}}<br>

             url路径内传参   ？age = 18 & sex = 男（不需要加引号！）<br>

             获取传参  {{$route.query.age}}   {{$route.query.sex}}<br>

             通过点击事件，设置setTimeout()方法，间隔时间后，

             触发回调函数内的vue实例的router属性的push（）方法，实现手动路由<br>

             第一种方式：<br>

             setTimeout(function(){<br>

                 this.router.push("/username/汪")<br>

             },2000);<br>

             <br>

             第二种方式：<br>

             //传入一个对象，name属性表示路由的名字，params属性表示需要给哪个参数传值

             //比如下面给名称为username_router的路由中path为/userMessage/:name/:age传参

             setTimeout(function(){ <br>

                 this.router.push({name:"userMessage_router",params:{name:"汪",age=27}})<br>

             },2000);<br>

             <hr>

         </div>

     <!-- 上面是重点笔记，结合代码验证 -->

         <router-link to="/login">login</router-link>

         <router-link to="/user/王花花">王花花</router-link>

         <button @click="surf">漫游</button>

         <br>

         <router-link to="/userMessage/未知/未知">我的信息</router-link>

         <button @click="getMessage">点击获取</button>

         <router-view></router-view>

    </div>

     <script src="../lib/vue.js"></script>

     <script src="../lib/vue-router.js"></script>

     <script src="js/app.js"></script>

 </body>

 </html>

五、app.js

 var routes = [

     {

         path:"/login",

         component:{

             template:`

                 <h1>

                     登录

                 </h1>

             `

         }

     },

     {

         path:"/user/:name",

         name:"myrouter",

         component:{

             template:`

                 <div>

                     我的名字叫{{$route.params.name}}<br>

                     今年{{$route.query.age}}岁了 <br>

                     我是{{$route.query.sex}}生

                     <router-link to="more" append>更多信息</router-link>

                     <router-view></router-view>

                 </div>

             `

         },

         // 子路由的格式与父路由一样

         children:[

             {

                 path:"more",

                 component:{

                     // 子路由继承父路由的路径参数params

                     template:`

                         <div>

                         这是{{$route.params.name}}的详细信息：<br>

                         高配马公婆赶紧跑了啊东安街公安朵拉购IE的父</div>

                     `

                 }

             }

         ]

     },

     {

         path:"/userMessage/:name/:age",

         name:"userMessage_router",

         component:{

             template:`

             <div>

                 名字：{{$route.params.name}}<br>

                 年龄：{{$route.params.age}}

             </div>

             `

         }

     }

 ];

 var router = new VueRouter({

     routes

 });

 // 设置时间，手动访问和传参

 new Vue({

     el:"#app",

     router,

     methods:{

         surf:function(){

             // setTimeout()方法，第一个参数为回调函数，

             // 第二个参数为间隔多少毫秒后，开始出发回调函数

             setTimeout(function(){

                 // this.router表示调用Vue实例内部的router属性，然后再调用其push()方法

                 // push（）方法内传入需要跳转的路由路径

                 this.router.push("/login");

                 setTimeout(function(){

                     // this.router.push("/user/汪");

                     // 手动传参，传入一个对象，name属性表示路由的名字，params属性表示需要给哪个路径参数

                     // 传值

                     this.router.push({name:"myrouter",params:{name:"高富帅"}});

                 },2000)

             },2000)

         },

         getMessage:function(){

             setTimeout(function(){

                 // this.router.push("/userMessage/汪/27");

                 this.router.push({name:"userMessage_router",params:{name:"汪汪",age:28}})

             },2000);

         }

     }

 })

六、效果

七、谢谢观看，如有问题，随时交流哦

Vue的Router路由传参的更多相关文章

  1. react router @4 和 vue路由 详解(六)vue怎么通过路由传参？

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  2. vue中的路由传参及跨组件传参

    路由跳转   this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...

  3. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  4. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  5. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  6. angular路由传参和获取路由参数的方法

    1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...

  7. [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  8. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  9. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

随机推荐

  1. SQL中null比较的雷区

    SQL中遇到null要格外小心! oracle最坑: oracle中在可为null的字段上做逻辑关系运算要格外小心,如 <>,>,=,<,任何与null的运算结果都返回fals ...

  2. 集合-Collection接口

    集合 和 数组 的比较: 数组 - 本质上就是在内存空间中申请的一段连续内存空间,存放多个相同类型的数据 - 数组一旦定义完毕,则在内存空间中的长度固定. - 插入/删除元素时可能导致大量元素的移动, ...

  3. 链表经典题Merge Two Sorted Lists

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  4. jQuery打飞机游戏

    在线演示 本地下载

  5. oracle如何穿过防火墙连接数据库

    这个问题只会在WIN平台出现,UNIX平台会自动解决. 解决方法: 在服务器端的SQLNET.ORA应类似 SQLNET.AUTHENTICATION_SERVICES= (NTS) NAMES.DI ...

  6. Hdu 1800 字符串hash

    题目链接 题意: 给出n(n<=3000)个字符串(长度<30,数字组成,肯能存在前导0), 问该序列最少可以分成多少个单调序列．可以转化成求相同字符串的个数的最大值 附上代码: /*** ...

  7. inflate用一个XML源填充view. LayoutInflater

    java.lang.Object     android.view.LayoutInflater This class is used to instantiate layout XML file i ...

  8. laravel 博客项目部署到Linux系统后报错 权限都设置为777，仍然报错没有权限

    阿里工程师最后给出解决方案.

  9. 18.libgdx制作预览图,背景移动循环,改变地图颜色

    经过构思,游戏将分为两部分, 1,预览图,只负责展示世界形势 2,根据预览图生成的战役项 现在要记录的是我制作预览图的部分 1.预览图只有实际地图的1/4,首先生成地图(建议不要缩放以前地图,由于误差 ...

  10. poj 2184 Cow Exhibition（01背包）

    Cow Exhibition Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10882   Accepted: 4309 D ...