vue3使用vuerouter

Vue 3 中使用 Vue Router 有以下步骤：

1. 安装 Vue Router：

npm install vue-router@next

2. 在 `main.js` 中引入 Vue Router 和创建路由实例：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

const app = createApp(App)

app.use(router)

app.mount('#app')

3. 在 App.vue 中使用 `<router-view>` 组件来显示路由组件：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

4. 在组件中使用 `<router-link>` 来生成链接：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

5. 在组件中使用 `$router` 和 `$route` 对象来访问路由信息：

export default {
  methods: {
    goToAbout() {
      this.$router.push({ name: 'About' })
    }
  }
}