What's new in VUE3? Is this another way to play that the big guy discovered

Route parameters

The new VUE route 4 adopts a new parameter transmission method, which needs to be defined in advance

The following figure shows the route definition

Correct definition

Receive the effect

If you want to pass two arrays, you need to add a space after arr, if you don't add a space, the two arrays will be merged

Merge effects

As shown in the figure above, when using the params structure to pass parameters, you need to define the id, name, age, arr, list declarations first, and then the page can receive the parameters passed by the previous page after the page jumps, and if there are no parameters defined in the route, it cannot be obtained.

Another problem is that this params passing parameter cannot pass object or JSON data

The following figure shows parameters passed through params in route hopping

Here we passed more parameters that passed test1, test2, test3, test4, but when printing params parameters, we did not receive the data, and here vue should help us filter out such undefined parameters

If you need to pass data for an object type, you can convert the object to a string before converting it to an object

The following figure shows the URL of the browser

The new route changes the function of routing jumps to carry parameters, which needs to be noted here, so after the new route is used, the behavior of routing carrying parameters does not seem so appropriate, so it is recommended to use other methods for parameter passing.

Changes to DefineOptions

vue 3.3, beforeRouteEnter was added to defineOptions, this beforeRouteEnter can refer to the information of the current reason, and you can define a function in the next to view the information of the current component, but it is a bit chicken to view. At present, it seems that it can only be viewed, and the information of the component cannot be changed, which seems to have become richer, but it is almost meaningful.

instance

1. routing

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. The page before the route jumps

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. The page after the route jumps

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>           

A new experience for VUE3

Original link: https://juejin.cn/post/7237389821102571581