【Vue】路由组件通过props配置传参（图文+代码）

props:true

// 引入路由
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'
import Box_1 from '../pages/Box_1.vue'
import Box_2 from '../pages/Box_2.vue'
import Menu_1 from '../pages/Menu_1.vue'
import Menu_2 from '../pages/Menu_2.vue'


// 创建一个路由器

export default new VueRouter({
    routes: [

        {
            path: '/Box_1',
            component: Box_1,
            children: [
                {
                    name: 'myMenu',  // 用name代替路径
                    path: 'Menu_1',
                    component: Menu_1,
                    props:true
                },
                {
                    path: 'Menu_2',
                    component: Menu_2
                },
            ]
        },
        {
            path: '/Box_2',
            component: Box_2,
            children: [
                {
                    path: 'Menu_1',
                    component: Menu_1
                },
                {
                    path: 'Menu_2',
                    component: Menu_2
                },

            ]
        },
    ]


})

（1）query参数

         id:$route.query.id,

         name:$route.query.name,

（2）params参数

         id:$route.params.id,

         name:$route.params.name,

// 引入路由
// eslint-disable-next-line no-unused-vars
import VueRouter from 'vue-router'
import Box_1 from '../pages/Box_1.vue'
import Box_2 from '../pages/Box_2.vue'
import Menu_1 from '../pages/Menu_1.vue'
import Menu_2 from '../pages/Menu_2.vue'


// 创建一个路由器

export default new VueRouter({
    routes: [

        {
            path: '/Box_1',
            component: Box_1,
            children: [
                {
                    name: 'myMenu',  // 用name代替路径
                    path: 'Menu_1',
                    component: Menu_1,
                    props($route){
                        return{
                            id:$route.params.id,
                            name:$route.params.name,
                        }
                    }
                },
                {
                    path: 'Menu_2',
                    component: Menu_2
                },
            ]
        },
        {
            path: '/Box_2',
            component: Box_2,
            children: [
                {
                    path: 'Menu_1',
                    component: Menu_1
                },
                {
                    path: 'Menu_2',
                    component: Menu_2
                },

            ]
        },
    ]


})

注意：params：，如果是想query方式，就改成query