详解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 相关文章推荐
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
Javascript 继承机制实例
Aug 12 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
js实现圆形显示鼠标单击位置
Feb 11 Javascript
小程序实现上传视频功能
Aug 18 Javascript
原生js实现拖拽移动与缩放效果
Aug 24 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读取csv实现csv文件下载功能
2013/12/18 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
实例讲解python函数式编程
2014/06/09 Python
python操作gmail实例
2015/01/14 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
详解Python中heapq模块的用法
2016/06/28 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Flask 让jsonify返回的json串支持中文显示的方法
2018/03/26 Python
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
10条PHP编程习惯
2014/05/26 面试题
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
八年级生物教学反思
2014/01/22 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
中班教师个人总结
2015/02/05 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js