VUE3的新体验

路由传参

新的VUE路由4采用了新的传参方式，需要预先定义好

下图为路由定义

正确的定义

接收效果

下图这个是错误的定义，如果要传递两个数组，则需要在arr后面添加一个空格，如果没有添加空格，则会将两个数组进行合并

合并效果

如上图所示，采用params结构传参时，需要先定义好id，name，age，arr，list的声明，然后页面跳转以后才可以接收到上一个页面传递过来的参数，如果没有在路由里面定义的参数，是无法获取的。

还有一个问题就是，这个params传递参数是无法传递对象或者是json数据的

下图为路由跳转中通过params传递参数

在这里我们传递了多传递了test1，test2，test3，test4的参数，但是打印params参数的时候，并未接收到该数据，这里vue应该是帮我们过滤掉了此类未定义的参数

如果需要传递对象类型的数据，可以先将对象转换为字符串，然后再转为对象

下图为浏览器的URL

新的路由，将路由跳转携带参数的功能进行了改动，这里需要注意，所以新的路由使用以后，路由携带参数的行为看起来就不是那么妥当，所以建议使用其他方法进行参数的传递。

defineOptions的改动

vue3.3中，在defineOptions中添加了beforeRouteEnter，这个beforeRouteEnter可以参看当前理由的信息，还有就是可以在next中定义一个函数，查看当前组件的信息，但是查看却显得有些鸡肋。目前好像只可以查看，并不能对组件的信息进行改动，看似变得更加丰富了，但是却是差点意思。

实例

1. 路由

import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/home',
      name: 'home',
      component: HomeView,
      children: [
        {
          path: 'CxfCom:id/:name/:age/:arr*/:list* :obj1/:obj2/',
          name: 'CxfCom',
          component: import('../views/CxfCom.vue')
        }
      ]

    },
    {
      path: '/',
      name: '',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

1. 路由跳转前的页面

import { ref, ComponentPublicInstance, ComponentOptionsBase } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import TheWelcome from '../components/TheWelcome.vue'

interface PropsCxf {
  cxf: number
}
defineProps<PropsCxf>()

const router = useRouter()
const onTest = () => {
  router.push({
    name: 'CxfCom',
    path: 'CxfCom',
    params: {
      id: 1,
      name: '无我',
      age: '12',
      arr: [1, 2, 3, 4],
      list: ['a', 'b', 'c', 'd'],
      test1: '123',
      test2: 'test22',
      test3: [1, 2, 3],
      test4: ['x', 'y', 'z'],
      obj1: JSON.stringify({ obj: 1 }),
      obj2: JSON.stringify([{ a: 1, b: 2 }])
    }
  })
}
</script>

<template>
  <main>
    <h1 @click="onTest">test</h1>
    <br />
    <RouterView></RouterView>
  </main>
</template>

1. 路由跳转后的页面

import {
  ref,
  reactive,
  ComponentPublicInstance,
  ComponentOptionsBase,
  onMounted,
  getCurrentInstance
} from 'vue'
import { useRoute } from 'vue-router'
import TheWelcome from '../components/TheWelcome.vue'

// const router = useRoute()
// console.log(router.params)
// console.log(JSON.parse(router.params.obj2 as string))

defineOptions({
  beforeRouteEnter: (to, form, next) => {
    console.log(to)
    console.log(form)
    next((res) => {
      console.log(res.$data)
      console.log(res.$props);
      
    })
  }
})

// type ListItem = {
//   id: number
//   name: string
//   age: number
// }

// type List = ListItem[]
// type List =  Array<ListItem>
// type List = [ListItem, ListItem]

// const list: List = reactive<List>([])

// console.log(list)

// list.push({
//   id: 999,
//   name: '张三',
//   age: 19
// })

// list.push({
//   id: 888,
//   name: '李四',
//   age: 22
// })

// console.log(list)
</script>

<template>
  <div>
    <!-- <div class="div" v-for="(item, index) in list" :key="index">
      <h1>{{ item.id }}</h1>
      <h1>{{ item.name }}</h1>
      <h1>{{ item.age }}</h1>
    </div> -->
  </div>
</template>
<style scoped >
.div {
  width: 1000px;
  height: 200px;
  border: 1px solid red;
}
h1 {
  border: 1px none lime;
}
</style>