# vue3-router4-example

**Repository Path**: laochen/vue3-router4-example

## Basic Information

- **Project Name**: vue3-router4-example
- **Description**: vue3-router4-example
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-18
- **Last Updated**: 2023-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 工程初始化
```
1. pnpm install vform3-builds
2. pnpm install element-plus

```
# [vform3 vue3](https://gitee.com/vdpadmin/variant-form3-vite)
```
在线文档
https://www.yuque.com/visualdev/vform3/using-render

```
# [vform2 在线文档](https://www.yuque.com/visualdev/vform)
# [vform3 在线文档](https://www.yuque.com/visualdev/vform3)
```
https://www.vform666.com/document3.html
```

# [Vue3中使用this](https://juejin.cn/post/7028386809939755021)
```
https://juejin.cn/post/6951763834851983374
https://juejin.cn/post/7028386809939755021
```
# [vue3全家桶 之 Vue Router4的使用](https://juejin.cn/post/7031822082329542664)
# [VForm组件二次开发指南](https://space.bilibili.com/626932375)
```
vue2版本的在线文档
https://www.vform666.com/document.html
https://juejin.cn/post/7208750099836829751

```
# [一文读懂vue3的生命周期](https://juejin.cn/post/7224499191963156539)
```
在Vue3中，一些常见的钩子函数发生了变化。例如，vue2中的created和beforeCreate钩子函数被替换为了setup()，并且setup()在二者之前执行。beforeMount和mounted函数被替换成了onBeforeMount和onMounted。beforeUpdate 和update被替换为 onBeforeUpdate和onupdate。beforeDestroy和destroyed被替换为beforeUnmount和unmounted。这些钩子函数的执行顺序与Vue2的版本相同，但是有所不同的是，在Vue3中，它们是使用ES6类定义的。
```

# 动态路由匹配
```
https://juejin.cn/post/7031822082329542664

{ path: '/courseinfo/:title', component: CourseInfo }

to.params.title 获取到当前的变量 title

```

# [重点:vue-router四版本-适用vue3](https://juejin.cn/post/7220339259160363069)
```
组件内的守卫
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫(2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。


组合式 API 守卫也可以用在任何由 <router-view> 渲染的组件中，它们不必像组件内守卫那样直接用在路由组件上。
```

# [vue3+setup语法中使用beforeRouteEnter](https://juejin.cn/post/7232120266804150328)
```
<script setup> 在官网的介绍中，beforeRouteEnter 无法再其中使用，如果你正在使用组合 API 和 setup 函数来编写组件，你可以通过onBeforeRouteUpdate和onBeforeRouteLeave分别添加 update 和 leave 守卫。
```

# [Vue3中$refs的使用](https://juejin.cn/post/7028012631772364814)
```
通过 currentInstance 获取
通过<script setup>语法糖的写法，其组件是默认关闭的，也就是说如果是通过$refs或者$parents来访问子组件中定义的值是拿不到的，必须通过defineExpose向外暴露你想获取的值才行

子组件
<script setup>
import { ref } from '@vue/reactivity';

let message = ref('我是子元素').value

const alertMessage = function () {
    alert(message)
}
defineExpose({
    message,
    alertMessage
})
</script>

父组件
<!-- 父组件 -->
<template>
    <div>
        <Child ref="child"></Child>
        <button @click="show">Show Child Message</button>
    </div>
</template>

<script setup>
import { getCurrentInstance } from '@vue/runtime-core';
import Child from './Child.vue';
const currentInstance = getCurrentInstance()
function show() {
    currentInstance.ctx.$refs.child.alertMessage()
}
</script>
```

# [form-generator](https://gitee.com/mrhj/form-generator)
# [当VForm集成到Vue项目中后，VForm交互事件是否支持使用项目中预先配置好的axios发送请求](https://www.yuque.com/visualdev/vform/faqlist)
```

完全可以。VForm交互事件可以使用挂载到window上的全局对象，因此在引入VForm组件后（需修改main.js文件）将项目中预先配置好的的axios挂载到window，如下所示：
window.myAxios = axios // 此处myAxios名称可自定义
然后在VForm交互事件中用myAxios即可使用项目预置的axios对象。

按上面已经做了DEMO lib/common.js 新加到window下面

```
# [vform2 编译打包和项目集成](https://www.yuque.com/visualdev/vform/ohyr5i)
# [vform 扩展组件]
```
src/components/form-designer/widget-panel/widgetsConfig.js

```
# [自己手动造轮子封装 vForm 组件](https://juejin.cn/post/6844903912651112455)
# [vForm自定义组件说明](https://blog.csdn.net/computer1024/article/details/120663184)
# [推荐:可行【VForm3】扩展自定义表单组件](https://blog.csdn.net/weixin_43385060/article/details/129800409)
# [推荐-关于扩展自定义表单Vform3](https://blog.csdn.net/huangzhixin1996/article/details/124198056)
```
经验证 node_modules/.vite 这个缓存会有问题，每次重新编译后要删除

可能存在的问题及解决方法
如果使用Vite作为Vue项目的构建工具，Vite会将预构建的依赖缓存到 node_modules/.vite 目录下，如果发现编译打包的VForm3组件复制到 lib/vform 之后没有自动更新，请手工删除新项目里的 node_modules/.vite 目录

对现有的个性位置
/Users/simple/Documents/study/javascript/variant-form3-vite-master/src/components/form-designer/setting-panel/option-items-setting.vue

```
# [推荐:vform3 新增组件设置](https://blog.csdn.net/weixin_41048895/article/details/125871155)
```
亲测可以，实现扩展text控件中新加属性 fileType
```
# [Vform Vue3自定义组件（vant篇）](https://www.jianshu.com/p/6252d5a7ee72)
# [Vform3 功能扩展,组件及子组件复制导入](https://blog.csdn.net/qq_39977518/article/details/129827291)
# [variant form 新增自定义组件](https://blog.csdn.net/weixin_41048895/article/details/125871383)
# [表单开发可视化（电子表单）技术方案 ](https://www.sohu.com/a/543570279_121389665)
# [UForm可视化表单搭建器](https://zhuanlan.zhihu.com/p/66002856)
# [京东DripForm，标准化表单动态配置能力](https://juejin.cn/post/7042223821218119694?searchId=2023111920443219216D267B169C7EDD37)
# [vjform 动态界面组件](https://www.yuque.com/fyl080801/vjform)

# [vform3 扩展时会用到的]
```
http://pay.chat.vform666.com/forum.php?mod=viewthread&tid=52&extra=page%3D2
getFormRef().getTopFormRef()
当this指向的弹窗组件弹窗内部的组件，应该这样写：
const item = this.getFormRef().getParentFormRef().getWidgetRef('table').getSelectedRow()

解释如下：
1. this.getFormRef()获取到当前弹窗的v-form-render实例；
2.  this.getFormRef().getParentFormRef()获取到弹窗的父级v-form-render实例；
3. 如果是多级弹窗，需要获取顶层v-form-render，应该用 this.getFormRef().getTopFormRef()。
```