详解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 相关文章推荐
js 学习笔记(三)
Dec 29 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
Feb 04 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
js有序数组的连接问题
2013/10/01 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
基于python实现百度翻译功能
2019/05/09 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
如何解决安装python3.6.1失败
2020/07/01 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
C语言面试题
2015/10/30 面试题
办公室主任岗位职责
2013/11/08 职场文书
经理管理专业自荐信范文
2013/12/31 职场文书
高中化学教学反思
2016/02/22 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
Python实现双向链表基本操作
2022/05/25 Python