路由傳參

新的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中定義一個函數，檢視目前元件的資訊，但是檢視卻顯得有些雞肋。目前好像隻可以檢視，并不能對元件的資訊進行改動，看似變得更加豐富了，但是卻是差點意思。

執行個體

路由

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

路由跳轉前的頁面

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>

路由跳轉後的頁面

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>

VUE3的新體驗

原文連結：https://juejin.cn/post/7237389821102571581

VUE3的新體驗？這難道是大佬發現的另一種玩法

路由傳參

正确的定義

DefineOptions的改動

執行個體