2018-05-04 vue router传参

本项目基于 vue-element-admin 传参分为params和query方法 本文中使用到的是params方法 两者的区别是使用query参数会显示在url上 而params方法不会

页面中:

//html:
<el-table-column
    label="操作"
    width="200">
    <template slot-scope="scope">
      <el-button type="default" @click="routerEdit(scope.row.uuid)" size="mini">编辑</el-button>
      <el-button @click="handleDelete(scope.row)" type="danger" size="mini">删除</el-button>
    </template>
</el-table-column>

//使用@click绑定一个事件 然后在methods中: 
routerEdit(uuid){
        this.$router.push({
          name: 'courseclassupdate',  //这里需要注意的是params只能用name来引入路由
          params: {
            id: uuid
          }
        })
}
//然后在路由配置中:

export const constantRouterMap = [
  {
      path: '/general',
      component: Layout,
      name: 'General',
      meta: { title: '常规设置', icon: 'form' },
      children: [
        {
          path: 'order',
            name: 'General-order',
          component: () => import('@/views/general/order'),
          meta: { title: '订单管理', icon: 'form' }
        },
        {
        path: 'courseclassupdate',
        name: 'courseclassupdate',
        component: () => import('@/views/general/courseclassupdate'),
        meta: { title: '课程及班级编辑', icon: 'form' }, hidden: true
      }
      ]
    }
]
//在新页面中接收参数的方法 注意这里是route而不是router
      console.log(this.$route.params);

注：在使用时发现 使用params传递参数在刷新后参数会消失 但是使用query方法即使刷新页面参数也还在

代码中打印了接受过来的参数uuid

刷新前

刷新后参数还在

可根据需求使用上述方法

关于作者

  var myproject = {

    nickName  : "remix_huang",

    site : "https://www.jianshu.com/u/717e2ca57b3f"

  }