加载页面 跳转 新页面 vue

通常，我们点页面上的详情，或者编辑，需要加载一个新的页面出来。

vue中加载页面的方法：

在父页面中（通常是某个模块目录下的index.vue），先写这行代码：

import AddEditForm from './addOrEditForm'

./addOrEditForm 是当前目录下的 addOrEditForm.vue 文件。

AddEditForm 是自定义的名字。

组件名需要根据 AddEditForm 此名字来定义，即：<add-edit-form></add-edit-form>。

通常会加上一些属性：

<add-edit-form v-if="isShow" @closeForm="closeAddEditForm" :id="id" :isEdit="isEdit"></add-edit-form>

上面这行组件代码也是写在父页面中，通过点击页面上的按钮，调用方法，将isShow设置为true，便加载了新的页面。

例如：

<template>
<div>
<p-button type="link" @click="goToDetail(item)">详情</p-button>
</div>
</template>

    goToDetail(args) {
      this.dataId = args.id
      this.isEdit = 'detail'
      this.isShow = true
    },
    edit(args) {
      this.dataId = args.id
      this.isEdit = 'edit'
      this.isShow = true
    },

参考：

Vue项目中常用的两种页面转换方法_refreshdatalist-CSDN博客