目录
1. name + params
2. name + query
3. path + query
4. 路径字符串？拼接参数
5. 路径字符串 / 拼接参数
下面方法刷新参数都不会丢失
1. name + params
路由配置(需要配置成动态路由形式，原先的直接传参不能用了)
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组件A
import { useRouter } from 'vue-router'export default {name: 'Home',setup() {const router = useRouter()const toAbout = () => {router.push({name: 'about',params: {id: 100,},})}return {toAbout,}},}组件B
import { useRoute } from 'vue-router'export default {name: 'about',setup() {const route = useRoute()console.log('99999999', route.params)},}about
2. name + query
路由配置（普通形式即可，query会将参数?拼接到路径上）
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组件A
import { useRouter } from 'vue-router'export default {name: 'Home',setup() {const router = useRouter()const toAbout = () => {router.push({name: 'about',query: {id: 100,},})}return {toAbout,}},}组件B
import { useRoute } from 'vue-router'export default {name: 'about',setup() {const route = useRoute()console.log('99999999', route.query)},}about
3. path + query
路由配置（普通形式即可，query会将参数?拼接到路径上）
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组件A
import { useRouter } from 'vue-router'export default {name: 'Home',setup() {const router = useRouter()const toAbout = () => {router.push({path: '/about',query: {id: 100,},})}return {toAbout,}},}组件B
import { useRoute } from 'vue-router'export default {name: 'about',setup() {const route = useRoute()console.log('99999999', route.query)},}about
4. 路径字符串？拼接参数
路由配置
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组件A
import { useRouter } from 'vue-router'export default {name: 'Home',setup() {const router = useRouter()const toAbout = () => {router.push('/about?id=100')}return {toAbout,}},}组件B
import { useRoute } from 'vue-router'export default {name: 'about',setup() {const route = useRoute()console.log('99999999', route.query)},}about
5. 路径字符串 / 拼接参数
路由配置
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组件A
import { useRouter } from 'vue-router'export default {name: 'Home',setup() {const router = useRouter()const toAbout = () => {router.push('/about/100')}return {toAbout,}},}组件B
import { useRoute } from 'vue-router'export default {name: 'about',setup() {const route = useRoute()console.log('99999999', route.params)},}about