vue route 跳转

最新推荐文章于 2025-07-07 08:24:38 发布

转载最新推荐文章于 2025-07-07 08:24:38 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/moxiaowohuwei/p/11367164.html

文章标签：

#javascript #ViewUI

本文详细介绍了在Vue中如何使用路由进行页面跳转及组件动态加载的方法，包括grouporder和personorder模块的具体实现，展示了如何通过编程式导航和<router-link>组件来实现页面之间的跳转。

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

index.js
{
            path: '/grouporder/grouporderdetail/id/:id',
            name: '/grouporder/grouporderdetail/id/',
            component: () => import('@/view/guestOrder/groupOrderDetail')
        },

vue

this.$router.push({
        name: "/grouporder/grouporderdetail/id/",
        params: {
          id: this.ids
        }
      });

<router-link :to="{name:'/personorder/personorderdetail/id/',params:{id:ids}}">
        <el-button size="mini" type="primary">办理预定</el-button>
</router-link>



{
        path: '/personorder/personorderdetail/id/:id',
        name: '/personorder/personorderdetail/id/',
        component: () =>              
            import('@/view/guestOrder/personOrderDetail')
        },

{
         path:'/personorder/personorderdetail/persondetailcancel/id/:id/type/:type',
         component: () => import('@/view/guestOrder/personDetailCancel')
        },


<router-link :to="'/personorder/personorderdetail/persondetailcancel/id/'+ids+'/type/'+types">
     <el-button size="mini" type="danger" plain>跳转到取消页面</el-button>
 </router-link>

转载于:https://www.cnblogs.com/moxiaowohuwei/p/11367164.html