vue3 router实例代码
时间: 2023-07-25 11:27:13 浏览: 57
下面是一个使用Vue 3和Vue Router 4创建路由实例的示例代码:
```javascript
// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
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')
```
上面的代码创建了一个Vue Router实例,并将其添加到Vue应用程序中。在路由实例中定义了两个路由:一个指向`Home`组件,另一个指向`About`组件。
在应用程序中,我们需要使用`<router-view>`组件来渲染匹配到的组件。下面是`App.vue`组件的代码,它包含了`<router-view>`组件:
```html
<!-- App.vue -->
<template>
<div id="app">
<router-view />
</div>
</template>
```
这样就完成了Vue Router实例的创建和使用。