Vue3+Vue-Router4.x realizes routing jump transfer parameters

Install routing, note that version 4.x is required

npm install vue-router -s

srcCreate in the directoryrouter\index.js

import {
    
    
    createRouter,
    createWebHashHistory
} from 'vue-router'

const router = createRouter({
    
    
    history: createWebHashHistory(),
    routes: [{
    
    
            path: "/",
            name: "index",
            component: () => import( /* webpackChunkName: "index" */ "@/views/index/index"),
            meta: {
    
    
                title: "首页"
            }
        },
        {
    
    
            path: "/main",
            name: "main",
            component: () => import( /* webpackChunkName: "main" */ "@/views/main/main"),
            meta: {
    
    
                title: "主要"
            }
        }
    ]
})

export default router;

In main.jsimport

import {
    
    
    createApp
} from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

App.vueAdd

 <router-view></router-view>

In vueuse,

<script>
  import {
    
    
    useRouter
  } from "vue-router";
  export default {
    
    
    setup() {
    
    
      const router = useRouter()
      const methods = {
    
    
        goMain() {
    
    
          router.push({
    
    
            path: "/main",
            query: {
    
    
              id: 123
            }
          })
        }
      }
      return {
    
    
        ...methods
      };
    },
  };
</script>

Receive parameters

<script>
  import {
    
    
    onMounted
  } from "vue";
  import {
    
    
    useRoute
  } from "vue-router";
  export default {
    
    
    setup() {
    
    
      const route = useRoute()
      onMounted(() => {
    
    
        console.log(route.query.id)
      })
    }
  }
</script>