详解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截取字符串的2个函数介绍
Aug 27 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
JavaScript使用yield模拟多线程的方法
Mar 19 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
详解jQuery如何实现模糊搜索
May 10 jQuery
JS实现小星星特效
Dec 24 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
需要发散思维学习PHP
2009/06/29 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
jQuery ready函数滥用分析
2011/02/16 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
2014/09/03 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
简单谈谈Python中函数的可变参数
2016/09/02 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
人工神经网络算法知识点总结
2019/06/11 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python批量解压zip文件的方法
2019/08/20 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
工程现场管理求职自荐信
2013/10/02 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
30年同学聚会感言
2014/01/30 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
商业街策划方案
2014/05/31 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
自我评价优缺点范文
2015/03/11 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js
Django框架模板用法详解
2022/06/10 Python