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 ...
随机推荐
- 【Pyqt5】之高级控件QTableWidget的使用
1:动态渲染数据+动态添加控件(按钮,进度条) class MainWindow(QWidget, Ui_MainFrom): def __init__(self): super(MainWindow ...
- day38 20-Spring与Junit整合
package cn.itcast.test; import org.junit.Test; import org.junit.runner.RunWith; import org.springfra ...
- 无线传感网络协议——Smart Mesh IP
前言: SmartMesh IP 专为实现 IP 兼容性而设计,并基于 6LoWPAN 和 802.15.4e 标准.SmartMesh IP 产品线实现了网络适应性.可靠性和可扩展性水平,并拥有高级 ...
- spark-ML基础
一.ML组件 ML的标准API使用管道(pipeline)这样的方式,可以将多个算法或者数据处理过程整合到一个管道或者一个流程里运行,其中包含下面几个部分: 1. dataFrame:用于ML的dat ...
- parkingLot
一个支付宝停车支付生活号前端页面 //index.html //自定义键盘 <!DOCTYPE html> <html> <head> <meta chars ...
- More Effective C++: 05技术(30-31)
30:Proxy classes 代理类 在C++中使用变量作为数组大小是违法的,也不允许在堆上分配多维数组: int data[dim1][dim2]; int *data = new int[di ...
- Android实战：手把手实现“捧腹网”APP（一）-----捧腹网网页分析、数据获取
Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...
- BZOJ 3884 上帝与集合的正确用法题解
一道智慧题 其实解这题需要用到扩展欧拉定理, 有了上面的公式,我们不难看出此题的解法. 设b为2^2^2^2^2.....显然,b要比φ(p)要大,所以可以直接套公式 modp时的答案 ans(p)= ...
- @bzoj - 4377@ [POI2015] Kurs szybkiego czytania
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 n, a, b, p,其中 n, a 互质.定义一个长度为 ...
- 解决 VS 跳转定义和 Resharper 重复
在大约一周之前,Visual Studio 进行了一项更新,增加了 Ctrl+Click 点击跳转到定义的功能.这项功能与 ReSharper 重复了. 于是可以通过关闭其中一个跳转定义可以使用. V ...