vue3中使用vue-router

npm install vue-router@next

//route/index.js
import { createRouter, createWebHistory } from "vue-router"
import About from '../components/About.vue'
const Home = () => import("../components/Home.vue")
const routes = [
  { path: "/", redirect: "/home" },
  {
    path: "/home",
    name: "home",
    component: Home
  },
  {
    path: "/about",
    name: "about",
    component: About
  }
]
export default router = createRouter({
  history: createWebHistory(),
  routes: routes
})

import router from './route'
const app = createApp(App)
app.use(router)
app.mount('#app')

import {useRouter, useRoute} from 'vue-router'
//useRouter代表的是this.$router
//useRoute代表的是this.$route
setup() {
    let router = useRouter()
    let route = useRoute()
    const skipHome = () => {
      router.push({
        name: 'home',
        params: {
          id: 3
        }
      })
    }
    const skipAbout = () => {
      router.push("/about")
    }
    const getParams = () => {
      console.log(route.params)
    }
    return {
      skipAbout,
      skipHome,
      getParams
    }
  }