Vue3's routing parameter transfer method super complete summary

The following method will not be lost if the parameters are refreshed

1. name + params

Routing configuration (need to be configured in dynamic routing form, the original direct parameter transmission cannot be used)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/'
 
const router = createRouter({
  history: createWebHistory(.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about/:id',
      name: 'about',
      component: () => import('../views/'),
    },
  ],
})
 
export default router

Component A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      ({
        name: 'about',
        params: {
          id: 100,
        },
      })
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

Component B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    ('99999999', )
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

2. name + query

Routing configuration (just the normal form, query will splice parameters? onto the path)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/'
 
const router = createRouter({
  history: createWebHistory(.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/'),
    },
  ],
})
 
export default router

Component A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      ({
        name: 'about',
        query: {
          id: 100,
        },
      })
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

Component B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    ('99999999', )
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

3. path + query

Routing configuration (just the normal form, query will splice parameters? onto the path)

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/'
 
const router = createRouter({
  history: createWebHistory(.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/'),
    },
  ],
})
 
export default router

Component A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      ({
        path: '/about',
        query: {
          id: 100,
        },
      })
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

Component B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    ('99999999', )
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

4. Path string? Splicing parameters

Routing configuration

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/'
 
const router = createRouter({
  history: createWebHistory(.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/'),
    },
  ],
})
 
export default router

Component A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      ('/about?id=100')
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

Component B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    ('99999999', )
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

5. Path string/splicing parameters

Routing configuration

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/'
 
const router = createRouter({
  history: createWebHistory(.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about/:id',
      name: 'about',
      component: () => import('../views/'),
    },
  ],
})
 
export default router

Component A

<script>
import { useRouter } from 'vue-router'
 
export default {
  name: 'Home',
  setup() {
    const router = useRouter()
 
    const toAbout = () => {
      ('/about/100')
    }
 
    return {
      toAbout,
    }
  },
}
</script>
 
<template>
  <main>
    <button @click="toAbout">to About</button>
  </main>
</template>

Component B

<script>
import { useRoute } from 'vue-router'
 
export default {
  name: 'about',
  setup() {
    const route = useRoute()
    ('99999999', )
  },
}
</script>
 
<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>

Summarize

This is the end of this article about Vue3 routing parameter transfer method. For more related Vue3 routing parameter transfer content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!