在巢狀路由中，父路由向子路由傳值除了query外，還有params，params傳值有兩種情況，一種是值在url中顯示，另外一種是值不顯示在url中。

1、顯示在url中

index.html

<div id="app">
    <!-- router-view 路由出口, 路由匹配到的元件將渲染在這裡 -->
    <router-view></router-view>
    </div>

main.js params傳值是通過 :[引數值] 如path: "/home/game/:num"

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/:num", component: game }
        ]
    }
]
//建立路由例項
const router = new VueRouter({routes})
 
new Vue({
    el: '#app',
    data: {
        id:123,
    },
    methods: {
    },
    router
})
home.vue 在home中具體的值就跟在路徑後面，如 “/home/game/123”，也就是說傳遞給子路由的值就是 123

<template>
    <div>
        <h3>首頁</h3>
        <router-link to="/home/game/123">
            <button>顯示</button>
        </router-link>
        <router-view></router-view>
    </div>
</template>
game.vue 在子路由中，通過 this.$route.params.引數名來接受傳遞過來的值

<template>
    <h3>王者榮耀{{ this.$route.params.num }}</h3>
    </template>

2、不顯示在url中，如果在PC端將傳遞的值顯示在url中，這樣無形中就存在安全隱患，如果客戶不小心修改了url那樣就會出錯，移動端就無所謂了，如何才能不顯示在url中，同樣很簡單，但是需要給對映的路徑起一個別名，通過name來取別名

同樣只需將上面的main.js中的定義路由改為如下樣子，在子路由中通過name來給路徑其一個game1的別名。

//定義路由
const routes = [
    { path: "/", redirect: "/home" },//重定向
    {
        path: "/home", component: home,
        children: [
            { name: "game1", path: "/home/game/", component: game }
        ]
    }
]

home.vue 中router-link修改為:to="{ name:'game1', params: {num: 123} }" params中是要傳遞的引數，這樣傳遞的引數就不會顯示在url中。

<template>
    <div>
        <h3>首頁</h3>
        <router-link :to="{ name:'game1', params: {num: 123} }">
            <button>顯示</button>
        </router-link>
        <router-view></router-view>
    </div>
</template>

執行的結果如下圖