详解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获得CheckBoxList选中的数量
Oct 27 Javascript
jQuery解决iframe高度自适应代码
Dec 20 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
Aug 24 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
深入浅析jQuery对象$.html
2016/08/22 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
python中pygame模块用法实例
2014/10/09 Python
python实现ipsec开权限实例
2014/11/11 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python实现加密的方式总结
2020/01/19 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
网上祭先烈心得体会
2014/09/01 职场文书
职工年度考核评语
2014/12/31 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技