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 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
微信小程序实现吸顶效果
Jan 08 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
详解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
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
php GUID生成函数和类
2014/03/10 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
angular学习之ngRoute路由机制
2017/04/12 Javascript
原生js轮播特效
2017/05/18 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
JS实现checkbox互斥(单选)功能示例
2019/05/04 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
go和python变量赋值遇到的一个问题
2017/08/31 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
详解python中各种文件打开模式
2020/01/19 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
信访工作者先进事迹
2014/01/17 职场文书
标准自荐信范文
2014/01/29 职场文书
劳资协议书范本
2014/04/23 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书