Vue button中调用$router

问题描述

在返回按钮中实现回到上个页面的功能，一开始用的是在 @click 点击事件中绑定方法，并在方法中通过 $router 实现， 由于还要写多一个方法🙃所以就再想想有没有更简便的写法

实现逻辑

<div style="padding: 20px 20px;">
    <el-button @click="$router.push({path:`/menu/roleManage`})" 
               size="mini" icon="el-icon-refresh-right">返回</el-button>
</div>

在 path 中定义想要跳转的路径即可

tips

由于在router/index.js中定义的路由如下

{
    name: 'roleManage',
    path: 'roleManage', 
    component: () => import('@/views/menu/roleManage/list'),
    meta: {
      title: 'Role Management',
      icon: 'el-icon-s-help'
   }
},

这里定义的path可以相当于改写了原路径（/menu/roleManage/list）省去了后面的 /list
所以在上面 path 处可以直接使用 /menu/roleManage 作为跳转路径，切记一定要看仔细