详解vue嵌套路由-query传递参数

更新时间：2017年05月23日 09:38:51 作者：安静的对折

本篇文章主要介绍了详解vue嵌套路由-query传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数，传递参数有两种方法，通过 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

vue-amap安装和用法步骤
vue-amap是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。接下来通过本文给大家介绍vue-amap安装和使用,需要的朋友可以参考下
2021-12-12
vue2.0 elementUI制作面包屑导航栏
本篇文章主要给大家详细代码讲解了vue2.0 elementUI制作面包屑导航栏的过程，对此有兴趣的朋友可以学习下。
2018-02-02
vue element-ui里的table中表头与表格出现错位的解决
这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue中如何使用echarts动态渲染数据
这篇文章主要给大家介绍了关于vue中如何使用echarts动态渲染数据的相关资料,echarts是一款基于JavaScript的开源可视化图表库,它通过简单的配置即可实现各种各样的可视化效果,需要的朋友可以参考下
2023-11-11
详解Vue之计算属性
这篇文章主要介绍了Vue之计算属性的相关知识，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-06-06
Vue-Element-Admin集成自己的接口实现登录跳转
关于这个Vue-element-admin中的流程可能对于新的同学不是很友好，所以本文将结合实例代码，介绍Vue-Element-Admin集成自己的接口实现登录跳转，感兴趣的小伙伴们可以参考一下
2021-06-06
vue3中组件传值的多种方法总结
学习过vue2的宝子们肯定知道,组件传值是vue项目开发过程中必不可少的功能场景,下面这篇文章主要给大家介绍了关于vue3中组件传值的多种方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
vue3如何实现单点登录
这篇文章主要介绍了vue3如何实现单点登录问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue表单类的父子组件数据传递示例
本篇文章主要介绍了Vue表单类的父子组件数据传递示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue如何设置定时器和清理定时器
这篇文章主要介绍了vue如何设置定时器和清理定时器，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05