详解vue嵌套路由

详解vue嵌套路由

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

index.html

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", chttp://omponent: home,

children: [

{ path: "/home/game", component: game }

]

}

]

//创建路由实例

const router = new VueRouter({routes})

new Vue({

el: '#app',

data: {

id:123,

},

methods: {

MKfiexTwEH},

router

})

home.vue 通过query来传递num参数为1，相当与在 url 地址后面拼接参数

显示

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。