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

谁践踏了优雅 2022-06-05 03:52 192阅读 0赞

在嵌套路由中，父路由向子路由传值，除了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
        }
      ]
    })