详解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>
运行后的结果，传递的参数在地址栏中有显示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Tabs 组件提供了选项卡功能,默认选中第一个标签页,下面这篇文章主要给大家介绍了关于vue elementUi中的tabs标签页使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-03-03
随着前端技术的飞速发展,Vue.js作为一个流行的JavaScript框架,已经被广泛应用于构建现代Web应用,然而,随着应用的复杂性和规模的增加,性能优化也成为开发者必须面对的重要任务,在本篇博客中,我们将探讨几种常用的Vue性能优化方法,需要的朋友可以参考下2024-12-12
在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总(推荐)
dhtmlxGantt一个功能丰富的甘特图插件，支持任务编辑，资源分配和多种视图模式，这篇文章主要介绍了在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总,需要的朋友可以参考下2023-03-03
本篇文章主要介绍了Vue计算属性的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
嵌套路由就是父路由里面嵌套他的子路由，父路由有自己的路由导航和路由容器（router-link、router-view），通过配置children可实现多层嵌套，这篇文章主要介绍了Vue--Router--嵌套路由(children)的用法,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了uni-app制作小程序实现左右菜单联动效果,实现步骤和思路都很简单，今天通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
Vue全局自适应大小:使用postcss-pxtorem方式
本文介绍了如何在Vue项目中使用postcss-pxtorem插件实现响应式设计,postcss-pxtorem可以自动将CSS文件中的px单位转换为rem单位,从而实现更好的自适应布局,通过配置postcss-pxtorem插件,可以在构建时自动完成转换,无需手动修改代码2025-01-01
这篇文章主要介绍了vue打包相关细节整理(小结),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
vue3组合API中setup、 ref、reactive的使用大全
本文给大家介绍vue3组合API中setup、 ref、reactive的用法，初步了解reactive的使用及具体用法，通过示例代码给大家介绍的非常详细，需要的朋友参考下吧2021-06-06
VuePress为每一个由它生成的页面提供预加载的html，不仅加载速度极佳，同时对seo非常友好。这篇文章主要介绍了基于vue-ssr的静态网站生成器VuePress 初体验,需要的朋友可以参考下2018-04-04
最新评论