Vue3+Vue-Router4.x实现路由跳转传参

安装路由，注意需要4.x版本

npm install vue-router -s

在src目录下新建router\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;

在main.js进行导入

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

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

App.vue新增

 <router-view></router-view>

在vue中使用

<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>

接收参数

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