Vue3路由中的参数传递

Vue3中也是两种方式传递一个是query，一个是params

下面是传参demo中的几个主要代码

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/test/:id',
    name: 'test',
    component: () => import('../views/TestView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

main.js

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

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

App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view/>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

TestView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import router from '@/router';
import { ref } from 'vue'
export default {
  name: 'TestView'
}
</script>

<script setup>
  const msg = ref("")
  // msg.value = router.currentRoute.value.query.id
  msg.value = router.currentRoute.value.params.id
</script>

HomeView.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <p>{{ msg }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import router from '@/router';
import { ref } from 'vue'
export default {
  name: 'HomeView'
}
</script>

<script setup>
  const msg = ref("")
  // msg.value = router.currentRoute.value.query.id
  msg.value = router.currentRoute.value.query.id
</script>

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="changeUrl('home')">跳转至About</button>
    <button @click="changeUrl('test')">跳转至test</button>
  </div>
</template>

<script>
import router from '@/router';
import { ref,onMounted } from 'vue'
export default {
  name: 'vue-about'
}
</script>

<script setup>
const msg = ref("")
onMounted(() => {
  msg.value = 123456
})
const changeUrl = (name) => {
  // this.$router.push('/home')
  if(name == 'home') {
    router.push({name, query: {id: "12345"}})
  } else {
    router.push({name, params: {id: "123456"}})
  }
}
</script>

<style scoped>

</style>

也可以将上问使用的直接引入router的方式改为下方这样的方式进行引入

import { useRoute,useRouter } from 'vue-router'
//  useRoute 相当于vue2中的this.$route(),表示当前的路由对象
//  useRouter 相当于vue2中的this.$router(),表示全局的路由对象
const router = useRouter()
const curRouter = useRoute()
// 使用上述方式输出传递过来的参数
console.log("router", router.currentRoute.value.query.id)
console.log("curRouter", curRouter.query.id)