关于v-router传值的一些思考，要前后一致方能成功

最新推荐文章于 2022-10-09 22:03:03 发布

原创最新推荐文章于 2022-10-09 22:03:03 发布 · 585 阅读

0 ·

CC 4.0 BY-SA版权

前端js 同时被 2 个专栏收录

67 篇文章

订阅专栏

vue-router

14 篇文章

订阅专栏

本文介绍了一个促销管理系统中使用的路由配置方案，包括不同促销活动的页面布局及导航方式，通过params和query参数的不同使用场景对比，帮助理解Vue Router的灵活运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
        path: '/sales',
        component: Layout,
        redirect: '/sales/derate',
        name: '促销管理',
        meta: { title: '促销管理', icon: 'table' },
        children: [
            {
                path: 'derate',
                name: '满减发布',
                component: _import('sales/derate/index'),
                meta: { title: '满减发布', icon: 'form' }
            },
            {
                path: 'fullgiving',
                name: '满赠发布',
                component: _import('sales/fullgiving/index'),
                meta: { title: '满赠发布', icon: 'form' }
            },
            {
                path: 'derate1',
                name: '满减活动列表',
                component: _import('salesPromotion/derate/index'),
                meta: { title: '满减活动', icon: 'form' }
            },
            {
                path: 'fullgiving1',
                name: '满赠活动列表',
                component: _import('salesPromotion/present/index'),
                meta: { title: '满赠活动', icon: 'form' }
            },
            {
                path: 'fullgiving2',
                name: '主页模板',
                component: _import('templet/index'),
                meta: { title: '主页模板', icon: 'form' }
            },
            {
                path: 'fullgiving3',
                name: '虚拟分类',
                component: _import('virtualClassify/index'),
                meta: { title: '虚拟分类', icon: 'form' }
            },
            {
                path: 'marketingSettings',
                name: '营销设置',
                component: _import('sales/marketing/marketingSettings'),
                meta: { title: '营销设置', icon: 'form' }
            },
            {
                path: 'modifyFullgiving',
                name: '满赠修改',
                component: _import('sales/modify/modifyFullgiving'),
                meta: { title: '满赠修改', icon: 'form' }
            },
            {
                path: 'modifyDerate',
                name: '满减修改',
                component: _import('sales/modify/modifyDerate'),
                meta: { title: '满减修改', icon: 'form' }
            },
            
        ]
    },

1.在进行js跳转

 this.$router.push({path:'modifyDerate',query:{'promotionId':67}});

2.进行router-link to跳转 <router-link to="modifyDerate">修改</router-link>
<router-link to="modifyDerate?promotionId=67">修改</router-link>传值
<router-link :to='{path:"modifyDerate", query:{ promotionId:67 } }'>修改</router-link>

1、params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。

{

        path: '/sales',

        component: Layout,

        redirect: '/sales/derate',

        name: '促销管理',

        meta: { title: '促销管理', icon: 'table' },

        children: [

{

                path: 'derate',

                name: '满减发布',

                component: _import('sales/derate/index'),

                meta: { title: '满减发布', icon: 'form' }

},

{

                path: 'fullgiving',

                name: '满赠发布',

                component: _import('sales/fullgiving/index'),

                meta: { title: '满赠发布', icon: 'form' }

},

{

                path: 'derate1',

                name: '满减活动列表',

                component: _import('salesPromotion/derate/index'),

                meta: { title: '满减活动', icon: 'form' }

},

{

                path: 'fullgiving1',

                name: '满赠活动列表',

                component: _import('salesPromotion/present/index'),

                meta: { title: '满赠活动', icon: 'form' }

},

{

                path: 'fullgiving2',

                name: '主页模板',

                component: _import('templet/index'),

                meta: { title: '主页模板', icon: 'form' }

},

{

                path: 'fullgiving3',

                name: '虚拟分类',

                component: _import('virtualClassify/index'),

                meta: { title: '虚拟分类', icon: 'form' }

},

{

                path: 'marketingSettings',

                name: '营销设置',

                component: _import('sales/marketing/marketingSettings'),

                meta: { title: '营销设置', icon: 'form' }

},

{

                path: 'modifyFullgiving/:id',

                name: '满赠修改',

                component: _import('sales/modify/modifyFullgiving'),

                meta: { title: '满赠修改', icon: 'form' }

},

{

                path: 'modifyDerate/:id',

                name: '满减修改',

                component: _import('sales/modify/modifyDerate'),

                meta: { title: '满减修改', icon: 'form' }

},

]

},

1.在进行js跳转

 this.$router.push({path:'modifyDerate',params:{'promotionId':67}});

2.进行router-link to跳转<router-link to='modifyDerate/67'>修改</router-link>
<router-link:to="{ name:'modifyDerate',params: { promotionId: 67},query: { queryId: status2 }}" >
刚才已经说了，query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候，已经是$route而不是$router了哦！！
this.$router.push({ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }});