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实现手把手教你月入万刀(转贴)
Nov 07 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
AngularJS实现路由实例
Feb 12 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
Vue实现多标签选择器
Nov 28 Javascript
vue 动态表单开发方法案例详解
Dec 02 Javascript
浅谈javascript如何获取文件后缀名
Aug 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
php中使用url传递数组的方法
2015/02/11 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
python实现在IDLE中输入多行的方法
2018/04/19 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python操作redis数据库的三种方法
2020/09/10 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
如何提高SQL Server的安全性
2016/07/25 面试题
2014年扶贫工作总结
2014/11/18 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
525心理健康活动总结
2015/05/08 职场文书
党纪处分决定书
2015/06/24 职场文书
创业计划书之酒厂
2019/10/14 职场文书