vue-router实现组件间的跳转---参数传递
四、通过VueRouter来实现组件之间的跳转：参数的传递
login ---用户名--->main
①明确发送方和接收方
②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}
③接收方获取传递来的数据
this.$route.params.id
④跳转的时候，发送参数
this.$router.push('/myTest/20')
<router-link :to="'/myTest'+id">跳转</router-link>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--指定容器 -->
<router-view></router-view>
</div>
<script>
//创建主页面组件
var myMain = Vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uName:''
}
},
template:`
<div>
<h1>主页面用户名:{{uName}}</h1>
</div>
`,
//挂载该组件时自动拿到数据
beforeMount:function(){
//接收参数
console.log(this.$route.params);
this.uName = this.$route.params.myName ;
}
})
//创建登录页面组件
var myLogin = Vue.component("login-component",{
//保存用户输入的数据
data:function(){
return {
userInput:""
}
},
methods:{
toMain:function(){
//跳转到主页面，并将用户输入的名字发送过去
this.$router.push("/main/"+this.userInput);
console.log(this.userInput);
}
},
template:`
<div>
<h1>登录页面</h1>
<input type="text" v-model="userInput" placeholder="请输入用户名">
<button @click="toMain">登录到主页面</button>
<br>
<router-link :to="'/main/'+userInput">登录到主页面</router-link>
</div>
`
})
var NotFound = Vue.component("not-found",{
template:`
<div>
<h1>404 Page Not Found</h1>
<router-link to="/login">返回登录页</router-link>
</div>
`
})
//配置路由词典
const myRoutes = [
{path:"",component:myLogin},
{path:"/login",component:myLogin},
//注意冒号,不用/否则会当成地址
{path:"/main/:myName",component:myMain},
//没有匹配到任何页面则跳转到notfound页面
{path:"*",component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
// 注意,路由地址
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>传参练习</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!-- -->
<router-view></router-view>
</div>
<script>
//创建产品列表组件
var myList = Vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productList:["苹果","华为","三星","小米","vivo"]
}
},
template:`
<div>
<h4>这是列表页</h4>
<ul>
<li v-for="(tmp,index) in productList">
//将index传递过去
<router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
</li>
</ul>
</div>
`
})
//详情页组件
var myDetail = Vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myIndex:""
}
},
//在挂载完成后,将接收到的index赋值给myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
<div>
<h4>这是详情页</h4>
<p>这是id为：{{myIndex}}的产品</p>
</div>
`
})
//页面找不到的时候
var NotFound = Vue.component("not-found",{
template:`
<div>
<h1>404 Page Not Found</h1>
</div>
`
})
// 配置路由词典
const myRoutes = [
{path:"",component:myList},
{path:"/list",component:myList},
{path:"/detail/:id",component:myDetail},
{path:"*",component:NotFound},
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue-router实现组件间的跳转---参数传递的更多相关文章
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总
目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...
- vue程序中组件间的传值方式
vue程序在组件中进行传值有多种方式,这里记录我在项目中使用到的三种: 1. 父组件向子组件传值 2. 子组件向父组件传值 3. 通过路由传参 父组件通过props向子组件传值 在子组件script中 ...
- 通过vue-router实现组件间的跳转
三.通过VueRouter来实现组件之间的跳转提供了3种方式实现跳转:①直接修改地址栏中的路由地址 <!doctype html> <html> <head> &l ...
- vue的父子组件间的相互传参props及props数据的多种验证机制
感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- vue中兄弟组件间通讯
vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
随机推荐
- Hive的安装搭建（三）
03 Hive的安装搭建 Hive可以从源码中编译安装,也可以直接使用官网下载的安装包,在此处我们选择安装包解压安装的方式. Hive中最最重要的角色就是metastore 因此按照metastore ...
- java高并发核心要点|系列1|开篇
在java高并发编程,有几个很重要的内容: 1.CAS算法 2.CPU重排序 3.缓存行伪共享 我们先来说说高并发世界中的主要关键问题是什么? 是数据共享. 因为多线程之间要共享数据,就会遇到各种问题 ...
- SpringMVC入门示例
1.新建一个Java Web项目 2.导入jar包 3.在WEB-INF下面建一个hello.jsp页面. 1 <%@ page language="java" import ...
- get和post请求的区别？
①get请求用来从服务器上获得资源,而post是用来向服务器提交数据: ②get将表单中数据按照name=value的形式,添加到action 所指向的URL 后面,并且两者使用“?”连接,而各个变量 ...
- JAVA笔记27-正则表达式（RegularExpressions）
正则表达式是字符串的处理利器. 用途:字符串匹配(字符匹配).字符串查找.字符串替换 例如:IP地址是否正确.从网页中揪出email地址(如垃圾邮件).从网页中揪出链接等 涉及到的类:java.lan ...
- 【NOIP2016普及组复赛】魔法阵
题目 分析 设xd-xc为i,那么xb-xa=2i, 又因为xb-xa<(xc-xb)/3, 那么c>6i+b. 于是,先枚举i, 再分别枚举xa和xd, 根据之间的关系,用前缀和求出每一 ...
- CSS水印“点击穿透”
- JPA学习（二、JPA_基本注解）
框架学习之JPA(二) JPA是Java Persistence API的简称,中文名Java持久层API,是JDK 5.0注解或XML描述对象-关系表的映射关系,并将运行期的实体对象持久化到数据库中 ...
- HTML 和 CSS 画三角形和画多边行基本原理及实践
基本 HTML 标签 <div class = 'test'></div> 基本 CSS 代码 .test { width: 100px; height: 100px; bac ...
- BZOJ 2716 [Violet 3]天使玩偶 (CDQ分治、树状数组)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2716 怎么KD树跑得都那么快啊..我写的CDQ分治被暴虐 做四遍CDQ分治,每次求一个 ...