路由传参

安装VueRouter4

npm install vue-router@4 -S

src/router.js

//引入路由对象
import { createRouter, createWebHashHistory} from "vue-router"

//引入组件
import home from './components/home.vue'
import about from './components/about.vue'
import solt from './components/solt.vue'
// 创建路由
export default createRouter({
    history: createWebHashHistory(), //hash路由模式
    linkExactActiveClass: 'active',  //点击路由跳转的底部样式标量
    //路由列表
    routes: [
        {
            path: '/',
            name: 'home',
            component: home
        },
        {
            path: '/about/:id',
            name: 'about',
            component: about
        },
        {
            path: '/solt',
            name: 'solt',
            component: solt
        },
    ]
})

入口文件引入

main.js

import router from './routers/index.js'
createApp(App)
.use(router) // 路由挂载
.mount('#app')

路由跳转

组件home

<template>
  <div>
    <button @click="toAbout">跳转到About</button>
    <button @click="toAbout2">跳转到solt</button>
  </div>
</template>
<script>
import { useRouter } from 'vue-router'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const toAbout = () => {
      router.push({
        name: 'about',
        params: {
          id: 100,
        },
      })
    }

    const toAbout2 = () => {
        router.push({
          path:'/solt',
          query: {
            id: 100,
          },
        })
      }

    return {
      toAbout,
    }
  },
}
</script>

组件about

<template>
  <div class="about">
    <h1>about</h1>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'

export default {
  name: 'about',
  setup() {
    const route = useRoute()
    console.log('99999999', route.params)
  },
}
</script>

组件solt

<template>
  <div class="solt">
    <h1>about</h1>
  </div>
</template>
<script>
import { useRoute } from 'vue-router'

export default {
  name: 'solt',
  setup() {
    const route = useRoute()
    console.log('99999999', route.query)
  },
}
</script>