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 ...
随机推荐
- POJ3697
/* Memory Time 7096K 2641MS */ #include <iostream> #include <string> using namespace std ...
- 关于android SDK安装Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-1.xml出错
最近SDK出问题了,然后在google下载了一个android-sdk-windows.rar,然后点击SDK Manager,结果一直不能刷新API Level,然后就开始在网上找了好多 ...
- Java中时间和日期的处理
一.日期转换为字符串 1.日期以特定的格式输出: // 创建日期并转换为yyyy-MM-dd格式_(MM一定要大写,以免与hh:mm:ss中的mm冲突) SimpleDateFormat sdf = ...
- Sum Root to Leaf Numbers深度优先计算路径和
Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...
- cocos2dX 之CCAnimation/CCAnimate
我们今天来学习cocos2dX里面的动画的制作, 有人说, 不是前面CCAction已经学过了吗? 怎么还要学, CCAction是动作, 而我们今天要学的是动画哦, 是让一个东西动起来哦, 好了进入 ...
- WPF/Silverlight深度解决方案：(六)HLSL自定义渲染特效之完美攻略(上)
原文:WPF/Silverlight深度解决方案:(六)HLSL自定义渲染特效之完美攻略(上) Shader Effect种位图特效及2种渲染特效,而Silverlight中仅有这2种渲染特效: Bl ...
- objectarx之模型空间
AcDbObjectId CCommonFuntion::PostToModelSpace(AcDbEntity* pEnt){ // 获得指向块表的指针 AcDbBlockTable *pBlock ...
- oracle如何回收空间?
ALTER TABLE 名称 DEALLOCATE UNUSED [KEEP 4[M|K]] 1.当空间分配过大时,可以使用本命令 2.如果没有加KEEP,回收到水线 3.如果水线<MINEXT ...
- 网络流24题 负载平衡（DCOJ8013）
题目描述 G 公司有 n nn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 n nn 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运. 输入格式 文件 ...
- Laravel请求和输入
该篇文章主要介绍Laravel获取用户请求和输入信息的方法.获取基本输入信息: //获取输入数据,不用担心所使用的HTTP方法 $id = Input::get('id'); //可以指定默认值 $i ...