vue3.0+vue-router4.0 +vite2.0+jsx踩坑和心得（一直更新中）

1.data?.info?.name

一般我们获取数据对象下的属性下的属性，写法为：data && data.info && data.info.name，常用简写 data?.info?.name这种?.的写法在X5内核浏览器（eg:QQ浏览器）或者手机浏览器打开PC网页的时候会报错，如图1所示，具体原因未知，解决方案未知，若有大神有好的解决方案或者知道原因的麻烦点醒我哈。

图1

发现解决方案了，修改vite配置（如图2所示）

图2

2.vue-router4.0

（1）修改了addRoute添加动态路由，注意和router3区分开；

（2）beforeEach路由守卫那块没有next，可直接return值；

官方文档 https://next.router.vuejs.org/zh/api/#push

3.process环境变量

除了node环境下vite打包已经没有process环境变量，需要如下使用环境变量（图3）

图3

4.watch监听两个变量

vue2.0和vue3.0差别很大

vue2.0写法

vue3.0写法

5.provide，inject全局注入用法

必须在setup里面使用，不能放在其他地方使用

provide

import { defineComponent, onMounted, ref, provide } from 'vue'

import { RouterView } from 'vue-router'

export default defineComponent({

  name: 'App',

  setup() {

   const isRouterAlive = ref(true)

   const reload = () => {

       isRouterAlive.value = false // 先关闭

        setTimeout(() => { isRouterAlive.value = true // 再打开      }, 300)

    }

  onMounted(() => { })

  provide('pageLoad', reload) // 全局注入了reload函数，可在项目其他任何地方以inject引用，调用该函数

   return () => (

        <div style="height: 100%;">          {            isRouterAlive.value ? <RouterView /> : null          }        </div>

    )  },})