详解vue嵌套路由-params传递参数


Posted in Javascript onMay 23, 2017

在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中。

1、显示在url中

index.html

<div id="app"> 
  <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> 
  <router-view></router-view> 
  </div>

main.js params传值是通过 :[参数值] 如path: "/home/game/:num"

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter) 
//引入两个组件 
import home from "./home.vue" 
import game from "./game.vue" 
//定义路由 
const routes = [ 
  { path: "/", redirect: "/home" },//重定向 
  { 
    path: "/home", component: home, 
    children: [ 
      { path: "/home/game/:num", component: game } 
    ] 
  } 
] 
//创建路由实例 
const router = new VueRouter({routes}) 
 
new Vue({ 
  el: '#app', 
  data: { 
    id:123, 
  }, 
  methods: { 
  }, 
  router 
})

home.vue 在home中具体的值就跟在路径后面,如 “/home/game/123”,也就是说传递给子路由的值就是 123

<template> 
  <div> 
    <h3>首页</h3> 
    <router-link to="/home/game/123"> 
      <button>显示</button> 
    </router-link> 
    <router-view></router-view> 
  </div> 
</template>

game.vue 在子路由中,通过 this.$route.params.参数名来接受传递过来的值

<template> 
  <h3>王者荣耀{{ this.$route.params.num }}</h3> 
  </template>

详解vue嵌套路由-params传递参数

2、不显示在url中,如果在PC端将传递的值显示在url中,这样无形中就存在安全隐患,如果客户不小心修改了url那样就会出错,移动端就无所谓了,如何才能不显示在url中,同样很简单,但是需要给映射的路径起一个别名,通过name来取别名

同样只需将上面的main.js中的定义路由改为如下样子,在子路由中通过name来给路径其一个game1的别名。

//定义路由 
const routes = [ 
  { path: "/", redirect: "/home" },//重定向 
  { 
    path: "/home", component: home, 
    children: [ 
      { name: "game1", path: "/home/game/", component: game } 
    ] 
  } 
]

home.vue 中router-link修改为:to="{ name:'game1', params: {num: 123} }" params中是要传递的参数,这样传递的参数就不会显示在url中。

<template> 
  <div> 
    <h3>首页</h3> 
    <router-link :to="{ name:'game1', params: {num: 123} }"> 
      <button>显示</button> 
    </router-link> 
    <router-view></router-view> 
  </div> 
</template>

运行的结果如下图

详解vue嵌套路由-params传递参数

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

Javascript 相关文章推荐
firefox插件Firebug的使用教程
Jan 02 Javascript
javascript元素动态创建实现方法
May 13 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
node中使用shell脚本的方法步骤
Mar 23 Javascript
详解vue嵌套路由-query传递参数
May 23 #Javascript
vue-router 中router-view不能渲染的解决方法
May 23 #Javascript
angular+webpack2实战例子
May 23 #Javascript
jquery实现图片轮播器
May 23 #jQuery
详解用node编写自己的cli工具
May 23 #Javascript
JavaScript 巧学巧用
May 23 #Javascript
JS获取短信验证码倒计时的实现代码
May 22 #Javascript
You might like
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
Python MD5文件生成码
2009/01/12 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Django choices下拉列表绑定实例
2020/03/13 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
人力资源管理毕业生自荐信
2013/11/21 职场文书
档案接收函范文
2014/01/10 职场文书
工程管理英文求职信
2014/03/18 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
倡议书的格式写法
2015/04/28 职场文书
教师病假条范文
2015/08/17 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
2019年最新感恩节祝福语(28句)
2019/11/27 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
vue elementUI表格控制对应列
2022/04/13 Vue.js