一、文件结构

二、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. 【JZOJ3214】【SDOI2013】方程

    ╰(￣▽￣)╭ 给定方程 X1+X 2+-+Xn=m 我们对第 1.. n1 个变量 进行一些限制 : X1≤A1 X2≤A2 - Xn1 ≤An1 我们对第 n1+1.. n1+1.. n1+ n2 ...

  2. Leetcode680.Valid Palindrome II验证回文字符串2

    给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: "abca" 输出: ...

  3. php 获取客户端的ip、地理信息、浏览器信息、本地真实ip

    转自:http://www.blhere.com/948.html 这是非常实用的php常用类.获取客户端的ip.地理信息.浏览器信息.本地真实ip 1234567891011121314151617 ...

  4. PHP:测试SQL注入以及防止SQL注入

    在写登录注册的时候发现了SQL和JS注入这个危害网站的用户举动: 测试方法: SQL注入: 先来做一个测试: 用户名:’ or 1 # 密码:随便写8位以上 验证码:写正确 好吧,就那么简单就进去了: ...

  5. 6.12号整理（h5新特性-图片、文件上传）

    <input type="file" id='myFile' multiple> <ul> <li> <img src="&qu ...

  6. jenkins使用教程！

    http://jenkins-ci.org/ 首先去官方下载war包,直接安装jenkins的方式比较麻烦. 下载tomcat,jdk和ant cd /optwget http://mirrors.h ...

  7. hdu1848 sg打表

    果然是神器. #include<stdio.h> #include<string.h> #define maxn 1002 ],sg[maxn],hash[maxn]; voi ...

  8. python 错误类型

  9. python基础---字符串常用方法汇总

    s3 = '123's2 = ' 's1 = 'This Is \t Cash's='abcdefghijklmnopqrstuvwxyz's4 = "0000000this is stri ...

  10. Python基础：05集合类型

    Python中,集合对象是一组无序排列的可哈希的值.所以集合成员可以做字典中的键.集合中的元素都是唯一的. 集合(sets)有两种不同的类型,可变集合(set) 和 不可变集合(frozenset). ...