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

发布时间：2020-12-17 02:57:00 所属栏目：百科来源：网络整理

导读：在嵌套路由中我们经常会遇到父路由向子路由里面传递参数，传递参数有两种方法，通过 query 或者 params index.html main.js 同样通过重定向来显示父路由 //引入两个组件 import home from "./home.vue" import game from "./game.vue" //定义路由 const rout

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!