vue3怎么使用router
时间: 2023-10-18 16:17:16 浏览: 32
要在Vue3中使用router,你需要按照以下步骤进行操作:
首先,安装Vue Router:npm install vue-router@4.0.0-alpha.12
然后,在Vue3中创建一个新的Router实例,并将其添加到Vue应用程序的根实例。
```
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes // 这里是你定义的路由
})
const app = createApp(App)
app.use(router)
app.mount('#app')
```
接下来,你可以定义你的路由。你可以通过以下方式来定义路由:
```
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
component: Home
},
{
path: '/about',
component: About
}
]
})
```
最后,你需要在Vue3应用程序中使用`<router-view>`组件来呈现你的路由内容。
```
<template>
<div>
<h1>Vue3 Router</h1>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
```
以上是在Vue3中使用router的基本步骤。希望能够对你有所帮助。