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


Posted in Javascript onMay 23, 2017

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params

index.html

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

main.js 同样通过重定向来显示父路由

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", component: game } 
    ] 
  } 
] 
//创建路由实例 
const router = new VueRouter({routes}) 
 
new Vue({ 
  el: '#app', 
  data: { 
    id:123, 
  }, 
  methods: { 
 
  }, 
  router 
})

home.vue 通过query来传递num参数为1,相当与在 url 地址后面拼接参数

<template> 
  <div> 
    <h3>首页</h3> 
    <router-link :to="{ path:'/home/game', query: { num: 1} }"> 
      <button>显示<tton> 
    </router-link> 
 
    <router-view></router-view> 
  </div> 
</template>

game.vue 子路由中通过 this.$route.query.num 来显示传递过来的参数

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

运行后的结果,传递的参数在地址栏中有显示

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

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

Javascript 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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
原生JS实现不断变化的标签
May 22 #Javascript
You might like
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php微信支付接口开发程序
2016/08/02 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js转义字符介绍
2013/11/05 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
python中关于for循环的碎碎念
2017/06/30 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
python中的itertools的使用详解
2020/01/13 Python
python爬虫实现获取下一页代码
2020/03/13 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
《青蛙看海》教学反思
2014/04/23 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
大雁塔导游词
2015/02/04 职场文书
讲文明倡议书
2015/04/29 职场文书
商场圣诞节活动总结
2015/05/06 职场文书