四、通过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>

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>传参</title>
  6.     <script src="js/vue.js"></script>
  7.     <script src="js/vue-router.js"></script>
  8.  </head>
  9.  <body>
  10.   <div id="container">
  11.         <p>{{msg}}</p>
  12.         <!--指定容器  -->
  13.         <router-view></router-view>
  14.     </div>
  15.     <script>
  16.     //创建主页面组件
  17.         var myMain = Vue.component("main-component",{
  18.             //保存登录传递过来的数据
  19.             data:function(){
  20.         return {
  21.           uName:''
  22.         }
  23.       },
  24.             template:`
  25.                 <div>
  26.                     <h1>主页面用户名:{{uName}}</h1>
  27.                 </div>
  28.             `,
  29.             //挂载该组件时自动拿到数据
  30.             beforeMount:function(){
  31.                 //接收参数
  32.                 console.log(this.$route.params);
  33.                 this.uName = this.$route.params.myName ;
  34.             }
  35.         })
  36.         //创建登录页面组件
  37.         var myLogin = Vue.component("login-component",{
  38.             //保存用户输入的数据
  39.             data:function(){
  40.                 return {
  41.                     userInput:""
  42.                 }
  43.             },
  44.             methods:{
  45.                 toMain:function(){
  46.                     //跳转到主页面，并将用户输入的名字发送过去
  47.                     this.$router.push("/main/"+this.userInput);
  48.                     console.log(this.userInput);
  49.                 }
  50.             },
  51.             template:`
  52.                 <div>
  53.                     <h1>登录页面</h1>
  54.                     <input type="text" v-model="userInput" placeholder="请输入用户名">
  55.                     <button @click="toMain">登录到主页面</button>
  56.                     <br>
  57.                     <router-link :to="'/main/'+userInput">登录到主页面</router-link>
  58.                 </div>
  59.             `
  60.         })
  61.         var NotFound = Vue.component("not-found",{
  62.             template:`
  63.                 <div>
  64.                     <h1>404 Page Not Found</h1>
  65.                     <router-link to="/login">返回登录页</router-link>
  66.                 </div>
  67.             `
  68.         })
  69.         //配置路由词典
  70.         const myRoutes = [
  71.             {path:"",component:myLogin},
  72.             {path:"/login",component:myLogin},
  73.                 //注意冒号,不用/否则会当成地址
  74.             {path:"/main/:myName",component:myMain},
  75.             //没有匹配到任何页面则跳转到notfound页面
  76.             {path:"*",component:NotFound}
  77.         ]
  78.         const myRouter = new VueRouter({
  79.             routes:myRoutes
  80.         })
  81.         new Vue({
  82.             router:myRouter,
  83.             el:"#container",
  84.             data:{
  85.                 msg:"Hello VueJs"
  86.             }
  87.         })
  88. //    注意,路由地址
  89.     </script>
  90.  </body>
  91. </html>
  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>传参练习</title>
  6.     <script src="js/vue.js"></script>
  7.     <script src="js/vue-router.js"></script>
  8.  </head>
  9.  <body>
  10.   <div id="container">
  11.         <p>{{msg}}</p>
  12. <!--  -->
  13.         <router-view></router-view>
  14.     </div>
  15.     <script>
  16. //创建产品列表组件
  17.         var myList = Vue.component("product-list",{
  18.             //保存产品列表的数据
  19.             data:function(){
  20.                 return{
  21.                     productList:["苹果","华为","三星","小米","vivo"]
  22.                 }
  23.             },
  24.             template:`
  25.                 <div>
  26.                     <h4>这是列表页</h4>
  27.                     <ul>
  28.                         <li v-for="(tmp,index) in productList">
  29.                         //将index传递过去
  30.                             <router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
  31.                         </li>
  32.                     </ul>
  33.                 </div>
  34.             `
  35.         })
  36. //详情页组件
  37.         var myDetail = Vue.component("product-detail",{
  38.             //保存传递过来的index
  39.             data:function(){
  40.                 return{
  41.                     myIndex:""
  42.                 }
  43.             },
  44.             //在挂载完成后,将接收到的index赋值给myIndex
  45.             mounted:function(){
  46.                     this.myIndex = this.$route.params.id;
  47.             },
  48.             template:`
  49.                 <div>
  50.                     <h4>这是详情页</h4>
  51.                     <p>这是id为：{{myIndex}}的产品</p>
  52.                 </div>
  53.             `
  54.         })
  55. //页面找不到的时候
  56.         var NotFound = Vue.component("not-found",{
  57.             template:`
  58.                 <div>
  59.                     <h1>404 Page Not Found</h1>
  60.                 </div>
  61.             `
  62.         })
  63. //    配置路由词典
  64.         const myRoutes = [
  65.             {path:"",component:myList},
  66.             {path:"/list",component:myList},
  67.             {path:"/detail/:id",component:myDetail},
  68.             {path:"*",component:NotFound},
  69.         ]
  70.         const myRouter = new VueRouter({
  71.             routes:myRoutes
  72.         })
  73.         new Vue({
  74.             router:myRouter,
  75.             el:"#container",
  76.             data:{
  77.                 msg:"Hello VueJs"
  78.             }
  79.         })
  80.     </script>
  81.  </body>
  82. </html>

vue-router实现组件间的跳转---参数传递的更多相关文章

  1. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  2. vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总

    目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...

  3. vue程序中组件间的传值方式

    vue程序在组件中进行传值有多种方式,这里记录我在项目中使用到的三种: 1. 父组件向子组件传值 2. 子组件向父组件传值 3. 通过路由传参 父组件通过props向子组件传值 在子组件script中 ...

  4. 通过vue-router实现组件间的跳转

    三.通过VueRouter来实现组件之间的跳转提供了3种方式实现跳转:①直接修改地址栏中的路由地址 <!doctype html> <html> <head> &l ...

  5. vue的父子组件间的相互传参props及props数据的多种验证机制

    感觉自己即将完全步入前端大军,后台老板都不需要我弄了,塞翁失马...时间会告诉我们是好是坏 好了言归正传,最近vue是搞的不亦乐乎啊,下面来总结一下vue组件间的各种使用方法以及一些技巧 ------ ...

  6. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  7. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  8. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  9. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

随机推荐

  1. tp5 apache 转 nginx 需要配置的伪静态

    location / { if (!-e $request_filename){ rewrite ^(.*)$ /index.php?s=$ last; break; } }

  2. parted分区的步骤

    使用parted分区的步骤1. fdisk -l             ##查看一下当前的存储设备,这里可以看到新加入的磁盘,比如/dev/sdb2. parted /dev/sdb         ...

  3. 基于element ui 实现七牛云自定义key上传文件，并监听更新上传进度

    借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现 <el-upload multiple ref="sliderUpload&quo ...

  4. 【NOIP2016提高A组五校联考2】tree

    题目 给一棵n 个结点的有根树,结点由1 到n 标号,根结点的标号为1.每个结点上有一个物品,第i 个结点上的物品价值为vi. 你需要从所有结点中选出若干个结点,使得对于任意一个被选中的结点,其到根的 ...

  5. spark读取kafka数据 createStream和createDirectStream的区别

    1.KafkaUtils.createDstream 构造函数为KafkaUtils.createDstream(ssc, [zk], [consumer group id], [per-topic, ...

  6. 对vue源码之缓存的研究--------------引用

    探索vue源码之缓存篇 一.从链表说起 首先我们来看一下链表的定义: 链表(Linked list)是一种常见的基础数据结构,是一种线性表,但是并不会按线性的顺序存储数据,而是在每一个节点里存到下一个 ...

  7. Q15格式表示负小数

    1.用Q15.16-bit格式,表示出-0.5? 解析:其实很简单,Q15是dsp里为了优化浮点的,就是将小数* 2^15. 例如:0.333 * 32768 = 10911.744  取整数就是10 ...

  8. 51Nod 1433 0和5 (数论 && 被9整除数的特点)

    题意 : 小K手中有n(1~1000)张牌, 每张牌上有一个一位数的数, 这个字数不是0就是5.小K从这些牌在抽出任意张(不能抽0张), 排成一行这样就组成了一个数.使得这个数尽可能大, 而且可以被9 ...

  9. 【canvas学习笔记七】混合和裁剪

    globalCompositeOperation 如果我们先画了一个图形,然后要在这个图形上面再画一个图形,那么这个图形会怎么样呢?是覆盖在原来的图形上面吗?这时候,就要用到globalComposi ...

  10. ASP.NET MVC3.0下载功能实现

    C#代码: #region 下载文件 /// <summary> /// 下载文件 /// </summary> /// <param name="url&qu ...