用vue3写一个router
时间: 2023-10-18 16:13:09 浏览: 50
假设你已经安装并配置好了Vue3和Vue Router,以下是一个简单的示例:
```javascript
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Contact from '@/views/Contact.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
```
这里我们使用了`createRouter`方法创建了一个新的路由实例,然后使用`createWebHashHistory`方法创建了一个带有#的哈希模式的路由模式。我们还定义了三个路由:Home、About和Contact,并指定了它们的路径和对应的组件。
最后,我们将创建的路由实例导出,以便在Vue应用中使用。在主入口文件中,我们可以这样使用它:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
```
在这里,我们将路由实例作为插件使用,并将其挂载到Vue应用程序的根实例上。现在,我们可以在Vue组件中使用路由了,例如:
```html
<template>
<div>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
<router-view></router-view>
</div>
</template>
```
这里我们使用了`router-link`组件来创建三个链接,当用户单击它们时,路由会根据指定的路径自动加载相应的组件,并将它们渲染到`router-view`组件中。