在嵌套路由中我們經(jīng)常會遇到父路由向子路由里面?zhèn)鬟f參數(shù)，傳遞參數(shù)有兩種方法，通過 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 } ] } ] //創(chuàng)建路由實例 const router = new VueRouter({routes}) new Vue({ el: '#app', data: { id:123, }, methods: { }, router }) home.vue 通過query來傳遞num參數(shù)為1，相當與在 url 地址后面拼接參數(shù)
<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 來顯示傳遞過來的參數(shù)
<template> <h3>王者榮耀{{ this.$route.query.num }}</h3> </template>運行后的結(jié)果，傳遞的參數(shù)在地址欄中有顯示
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
