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

前端之家收集整理的这篇文章主要介绍了详解vue嵌套路由-query传递参数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params

index.html

main.js 同样通过重定向显示父路由

//引入两个组件
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 地址后面拼接参数

首页

显示
<router-view></router-view> 

game.vue 子路由中通过 this.$route.query.num 来显示传递过来的参数

王者荣耀{{ this.$route.query.num }}

运行后的结果,传递的参数在地址栏中有显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/39099.html

猜你在找的Vue相关文章