路由传参点击查看携带参数跳转到另一个页面

最新推荐文章于 2022-12-02 18:41:34 发布

我的天呐!!!

最新推荐文章于 2022-12-02 18:41:34 发布

阅读量477

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/xzbqd/article/details/128101426

版权

1.创建页面所对应组件(views/employees/UserLook.vue)

<template>
  <div>员工查看页面</div>
</template>
<script>
export default {
  data () {
    return {
  
    }
  }
}
</script>
<style></style>

2.配制路由(router/index.js)

  {
    path: '/employees',
    component: Layout,
    children: [
      {
        //  path:'a' ==> /employees/a   path:''  ===>'/employees'    path:'/a'   ===>  '/a'
        path: '', // 二种写法，相对写法：不以/开头，它的值是相对于父级的path,   绝对写法 它的值就是相应的跳转path
        component: () => import('@/views/employees/index'),
        meta: { title: '员工', icon: 'people' }
      },
      {
        hidden: true,
        path: 'import', // /employees/import
        component: () => import('@/views/employees/import.vue')
      },
      {
        hidden: true,
        path: 'userlook/:id', // 携带参数id
        component: () => import('@/views/employees/UserLook.vue')
      }
      // hidden:true,不要在菜单上显示
    ]
  },

3.跳转路由并传递当前用户id(views/employees/index.vue)

 <el-button type="text" @click="look(row.id)">查看</el-button>

    look (id) {
      this.$router.push('/employees/userlook/' + id)
    }

4.员工查看页面获取id(views/employees/UserLook.vue)

<template>
  <div>员工查看页面:{{ userId }}</div>
</template>
<script>
export default {
  data () {
    return {
      userId: this.$route.params.id
    }
  }
}
</script>
<style></style>