$route.query.id的用法

Book.vue文件

<template>
    <div>图书ID：{{ $route.query.id }}</div>
</template>

<script>
export default {

}
</script>

同时router/index.js文件

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/components/Home'
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'
import Book from '@/components/Book'

const router = createRouter({  // eslint-disable-line no-unused-vars
    history: createWebHistory(),
    routes: [
        {
        path: '/',
        component: Home
    },
    {
        path: '/news',
        component: News
    },
    {
        path: '/books',
        component: Books
    },
    {
        path: '/videos',
        component: Videos
    },
    {
        path: '/book',
        component: Book
    }
    ]
})


export default router;

对应的App.vue文件

<template>
    <p>
      <router-link to="/">首页</router-link>
      <router-link to="/news">新闻</router-link>
      <router-link to="/books">图书</router-link>
      <router-link to="/videos">视频</router-link>
      <router-link to="/book?id=1">图书1</router-link>
      <router-link to="/book?id=2">图书2</router-link>
    </p>
    <router-view></router-view>
</template>

<script>
  export default {
    name: 'App',
    components: {
       
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>