【Vue】3.vue2.0嵌套路由-params传递参数

在嵌套路由中，父路由向子路由传值，除了query外，还有params，params传值有两种情况，一种是值在url中显示，另一种是值不显示在url中。

（1）显示在url中

apple.vue

<template>
    <div>
      <div>
        {{msg}}
        {{$route.params.num}}
        <button @click="getParam">getParam</button>
      </div>
      <div>
        <router-view></router-view>
      </div>
      <div>
        <router-link :to="{path:'/apple/apple1'}">apple1</router-link>
        <router-link :to="{path:'/apple/apple2'}">apple2</router-link>
      </div>
    </div>
</template>

<script>
    export default{
        name:'Apple',
        data(){
            return {
                msg: 'hello apple'
            }
        },
      methods:{
        getParam(){
          console.log(this.$route.params.num);
        }
      }
    }
</script>

<style>
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Apple from '@/components/apple'
import Banana from '@/components/banana'
import Apple1 from '@/components/Apple1'
import Apple2 from '@/components/Apple2'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      redirect: 'helloworld'
    },
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/apple/:num', //参数在路由里面设置
      name: 'Apple',
      component: Apple,
      children:[
        {
          path:'apple1',
          name:'Apple1',
          component:Apple1
        },
        {
          path:'apple2',
          name:'Apple2',
          component:Apple2
        }
      ]
    },
    {
      path: '/banana',
      name: 'Banana',
      component: Banana
    }
  ]
})