Vue 根据路由实现页面跳转

原创已于 2022-07-07 16:16:55 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

于 2022-04-07 16:16:44 首次发布

本文介绍了如何使用Vue Router进行路径配置、页面跳转，包括通过动态路由参数和query传递数据的方法。重点讲解了人员管理模块的路由设置和不同功能的跳转技巧。

文章目录

一、方式1：

一、方式1：

1.router路由代码

import Layout from '@/layout'

const deviceRouter = {
  path: '/personnel',
  component: Layout,
  alwaysShow: true,
  name: 'personnel',
  meta: {
    title: '人员管理',
    icon: '人员管理',
    perms: ['personnel']
  },
  children: [
    // 整个页面进行跳转，建议路由平级
    {
      path: 'student',
      name: 'student',
      noShowingChildren: true,
      component: () => import('@/views/Student.vue'),
      meta: {
        title: '学生管理',
        perms: ['student']
      }
    },
    {
      path: 'student-add',
      name: 'studentAdd',
      component: () => import('@/views/studentAdd.vue'),
      meta: {
        hidden: true,
        title: '新增学生信息'
      }
    },
    // 第一种：修改功能，跳转页面
    {
      path: 'student-edit/:id',
      name: 'studentEdit',
      component: () => import('@/views/studentEdit.vue'),
      meta: {
        hidden: true,
        title: '编辑学生信息'
      }
    },
    // 第二种：修改功能，跳转页面
    {
      path: 'student-edit',
      name: 'studentEdit',
      component: () => import('@/views/studentEdit.vue'),
      meta: {
        hidden: true,
        title: '编辑学生信息'
      }
    }
  ]
}

export default deviceRouter

2.跳转方法

// 新增时跳转
this.$router.push('/personnel/student-add')
// 对应第一种，修改时跳转，传id
this.$router.push('/personnel/student-edit/' + row.id)
// 对应第二种，修改时跳转，传query
this.$router.push({ path: '/personnel/student-edit/', query: { id: row.id }})

3.数据接收

// 对应第一种，修改时跳转，接收参数
this.$route.params.id
// 对应第二种，修改时跳转，接收参数
this.$route.query.id