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 ...
随机推荐
- 二叉树总结—建树和4种遍历方式（递归&&非递归）
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u013497151/article/details/27967155 今天总结一下二叉树.要考离散了 ...
- [Vue CLI 3] 插件开发之 registerCommand 到底做了什么
首先,我们看到在 package.json 中有 scripts 的定义: "scripts": { "serve": "vue-cli-servic ...
- jsp里更新Clob类型字段数据
ResultSet rs = null; Connection conn = new dbconn().getconnect(); Statement stmt = null; int news=0; ...
- NOIP模拟 17.8.17
NOIP模拟17.8.17 A 小 G 的字符串文件名 输入文件 输出文件 时间限制 空间限制str.pas/c/cpp str.in str.out 1s 128MB[题目描述]有一天,小 L 给小 ...
- 开通了第一个博客，mark一下！
今日上网查询了不同的博客,包括csdn.掘金等,最终决定选择博客园.打算待前端学完后,自己建立一个博客,这段时间内先用博客园记录学习过程.经常总结.更新,相信坚持学习一定可以找到好工作!
- 2018-12-24-win10-uwp-求两个矩形相连的几何
title author date CreateTime categories win10 uwp 求两个矩形相连的几何 lindexi 2018-12-24 20:51:49 +0800 2018- ...
- QT_OPENGL-------- 5.model
在qt中实现opengl obj模型导入: main.cpp #include<GL/glew.h> #include <GLFW/glfw3.h> #include<s ...
- ES6对象的super关键字
super是es6新出的关键字,它既可以当作函数使用,也可以当作对象使用,两种使用方法不尽相同 1.super用作函数使用的时候,代表父类的构造函数,es6规定在子类中使用this之前必须先执行一次s ...
- 创建ros消息时出现：Unable to load msg [planning/Num]: Cannot locate message [Num]: unknown pack.....
创建ros消息可参考创建ROS消息和ROS服务. 按照这个教程进行创建的过程中出现了如下错误: Unable to load msg [msgs/locate]: Cannot locate mess ...
- @loj - 2092@ 「ZJOI2016」大森林
目录 @description@ @solution@ @accepted code@ @details@ @description@ 小 Y 家里有一个大森林,里面有 n 棵树,编号从 1 到 n. ...