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 回调函数中变量作用域的讨论
Sep 11 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
javascript事件模型实例分析
Jan 30 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
Three.js学习之几何形状
Aug 01 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
JavaScript 实现页面滚动动画
Apr 24 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
PHP对象相关知识总结
2017/04/09 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
深入浅析同源策略和跨域访问
2015/11/26 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python Pywavelet 小波阈值实例
2019/01/09 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
广州足迹信息技术有限公司Java软件工程师试题
2014/02/15 面试题
剪枝的学问教学反思
2014/02/07 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
排球赛新闻稿
2015/07/17 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
python数字图像处理之图像的批量处理
2022/06/28 Python