详解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设计模式 封装和信息隐藏(上)
Jul 24 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
JavaScript代码执行的先后顺序问题
Oct 29 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
JavaScript中MutationObServer监听DOM元素详情
Nov 27 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
重置版游戏视频
2020/04/09 魔兽争霸
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
JS判断是否手机或pad访问实现方法
2016/12/09 Javascript
js继承实现方法详解
2016/12/16 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
使用Python生成随机密码的示例分享
2016/02/18 Python
详解python中的 is 操作符
2017/12/26 Python
python删除某个字符
2018/03/19 Python
python 获取字符串MD5值方法
2018/05/29 Python
详解python的四种内置数据结构
2019/03/19 Python
python实现AES加密解密
2019/03/28 Python
python面向对象法实现图书管理系统
2019/04/19 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
基于Python 函数和方法的区别说明
2021/03/24 Python
2014年高三毕业生自我评价
2014/01/11 职场文书
初中学校军训方案
2014/05/09 职场文书
师范生求职信
2014/06/14 职场文书
会计系毕业求职信
2014/08/07 职场文书
房屋出售授权委托书
2014/10/12 职场文书
2014年护士长工作总结
2014/11/11 职场文书
安全承诺书
2015/01/19 职场文书
演讲比赛主持词
2015/06/29 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server