Table of contents
4. Path string? Stitching parameters
5. Path String / Concatenation Parameters
The refresh parameters of the following methods will not be lost
1. name + params
Routing configuration (need to be configured as a dynamic routing form, the original direct parameter passing cannot be used)
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about/:id',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router
Component A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push({
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()
console.log('99999999', route.params)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>
2. name + query
Routing configuration (ordinary form is enough, query will splicing parameters? to the path)
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router
Component A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push({
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()
console.log('99999999', route.query)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>
3. path + query
Routing configuration (ordinary form is enough, query will splicing parameters? to the path)
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router
Component A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push({
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()
console.log('99999999', route.query)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>
4. Path string? Stitching parameters
routing configuration
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router
Component A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push('/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()
console.log('99999999', route.query)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>
5. Path String / Concatenation Parameters
routing configuration
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/about/:id',
name: 'about',
component: () => import('../views/AboutView.vue'),
},
],
})
export default router
Component A
<script>
import { useRouter } from 'vue-router'
export default {
name: 'Home',
setup() {
const router = useRouter()
const toAbout = () => {
router.push('/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()
console.log('99999999', route.params)
},
}
</script>
<template>
<div class="about">
<h1>about</h1>
</div>
</template>