vue3中vuerouter使用

Vue Router是Vue.js官方的路由管理器。它和Vue.js核心深度集成，让构建单页面应用变得易如反掌。在Vue3中，使用Vue Router也非常简单，下面是使用Vue Router的基本步骤：

1. 安装Vue Router

在终端中执行以下命令安装Vue Router：

npm install vue-router@4.0.0-beta.1

2. 创建Vue Router实例

在main.js中导入Vue Router并创建Vue Router实例：

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

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

在router.js中创建Vue Router实例：

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3. 创建路由组件

在views文件夹中创建两个路由组件：

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to my home page!</p>
  </div>
</template>

<template>
  <div>
    <h1>About</h1>
    <p>About me!</p>
  </div>
</template>

4. 配置路由链接

在App.vue中添加路由链接：

<template>
  <div>
    <h1>My App</h1>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

5. 运行应用

在终端中执行以下命令启动应用：

npm run serve

打开浏览器访问http://localhost:8080，点击路由链接即可看到对应的路由组件。

以上就是使用Vue Router的基本步骤。需要注意的是，在Vue3中，Vue Router的创建方式和Vue2有所不同，需要使用createRouter和createWebHistory等函数创建Vue Router实例。