vue-router实现组件间的跳转(参数传递)


Posted in Javascript onNovember 07, 2017

通过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.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
Javascript事件实例详解
Nov 06 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
手写实现JS中的new
Nov 07 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 #Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 #Javascript
vue 运用mock数据的示例代码
Nov 07 #Javascript
vue环境搭建简单教程
Nov 07 #Javascript
用Webpack构建Vue项目的实践
Nov 07 #Javascript
vue双花括号的使用方法 附练习题
Nov 07 #Javascript
vue组件生命周期详解
Nov 07 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
jquery实现心算练习代码
2010/12/06 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
2020/03/31 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
详解Python中的__new__()方法的使用
2015/04/09 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
使用python实现BLAST
2018/02/12 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Python 如何创建一个线程池
2020/07/28 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
个人借款协议书范本
2014/11/17 职场文书
创先争优承诺书
2015/01/20 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
德生TECSUN S-2000使用手册文字版
2022/05/10 无线电
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技