详解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 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
Three.JS实现三维场景
Dec 30 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
vue router 动态路由清除方式
May 25 Vue.js
详解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 万年历实现代码
2012/10/18 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
Yii实现简单分页的方法
2016/04/29 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
让焦点自动跳转
2006/07/01 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
2014/04/11 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
js实现简单扫雷
2020/11/27 Javascript
Python中的sort()方法使用基础教程
2017/01/08 Python
简单实现python收发邮件功能
2018/01/05 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
PyTorch中permute的用法详解
2019/12/30 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
中药专业大学生医药工作求职信
2013/10/25 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
导游词之任弼时故居
2020/01/07 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技