详解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 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP 转义使用详解
2013/07/15 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery实现的简单悬浮层功能完整实例
2017/01/23 Javascript
js中作用域的实例解析
2017/03/16 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
npm的lock机制解析
2019/06/20 Javascript
Vue触发隐藏input file的方法实例详解
2019/08/14 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python字符串处理实现单词反转
2017/06/14 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
用python制作个音乐下载器
2021/01/30 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
应届毕业生自我评价分享
2013/12/15 职场文书
探矿工程师自荐信
2014/01/24 职场文书
计算机求职信
2014/07/02 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2014年保管员工作总结
2014/11/18 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
服务器SVN搭建图文安装过程
2022/06/21 Servers