Vue的Router路由传参
一、文件结构
二、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路由传参的更多相关文章
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参？
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- vue中的路由传参及跨组件传参
路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$r ...
- vue父子组件路由传参的方式
一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- angular路由传参和获取路由参数的方法
1.首先是需要导入的模块 import { Router } from "@angular/router";//路由传参用到 import{ActivatedRoute,Param ...
- [Vue 牛刀小试]：第十三章 - Vue Router 基础使用再探（命名路由、命名视图、路由传参）
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
随机推荐
- Pyhton AES_cbc解密
最近很多朋友问我加密解密有没有啥好推荐的方式,一般对AES的加密解密方式直接用在线加密或者解密就行,我为了方便测试,将网址以python脚本的形式写了出来,很简单的东西,2分钟搞定,随手记录一下~~ ...
- NSURLSessionDownloadTask的深度断点续传
http://www.cocoachina.com/ios/20160503/16053.html 本文为投稿文章,作者:WeiTChen 对于后台下载与断点续传相信大家肯定不会陌生,那么如果要同时实 ...
- PHP学习(语言结构语句）
switch case语句 for循环语句: foreach循环语句 常用于遍历数组,一般有两种使用方式:不取下标.取下标. (1)只取值,不取下标 <?php foreach (数组 as 值 ...
- 外贸电子商务网站之Prestashop 安装后台中文语言包
1.先进入到后台,我们进入Localization-> Localization2, 在下面的国家列表中,我们选择china ,导入即可. 3.进入Localization-> Trans ...
- MUI - sortable在mui.js前端框架不兼容的解决方案
关于sortable看这 兼容的解决方案看这 http://www.cnblogs.com/phillyx/ 示例代码已更到github
- python 解释器编码
- shell学习（18）- split切分文件命令
Linux split命令用于将一个文件分割成数个. 该指令将大文件分割成较小的文件,在默认情况下将按照每1000行切割成一个小文件. 语法: split [--help][--version][-& ...
- SGU 101 Domino【欧拉路径】
题目链接: http://acm.sgu.ru/problem.php?contest=0&problem=101 题意: N个多米诺骨牌,每个骨牌左右两侧分别有一个0~6的整数(骨牌可以旋转 ...
- 通过反射拿到构造方法 Day25
package com.sxt.constructor; /* * 反射 * Class类拿到构造方法 */ import java.lang.reflect.Constructor; public ...
- 01docker简单使用和配置(容器、镜像)
一:容器中运行简单应用程序 1:hello world 使用docker可以在容器中运行应用程序,使用docker run命令即可.比如下面的命令: $ docker run ubuntu /bin ...