详解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学习随笔(使用window和frame)的技巧
Mar 08 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
详解如何去除vue项目中的#——History模式
Oct 13 Javascript
详解Puppeteer 入门教程
May 09 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
vue如何使用外部特殊字体的操作
Jul 30 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
原生JS实现不断变化的标签
May 22 #Javascript
You might like
php实现的在线人员函数库
2008/04/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
js星星评分效果
2014/07/24 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
详解在Python程序中自定义异常的方法
2015/10/16 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
python默认参数调用方法解析
2020/02/09 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
三好生演讲稿
2014/09/12 职场文书
领导欢送会主持词
2015/07/06 职场文书