vue3router的使用
时间: 2023-08-28 08:22:38 浏览: 56
Vue 3 的路由管理器是 Vue Router。它用于在 Vue 应用程序中实现客户端路由。下面是使用 Vue 3 Router 的基本步骤:
1. 首先,安装 Vue Router。你可以使用 npm 或 yarn 进行安装:
```bash
npm install vue-router@next
```
或
```bash
yarn add vue-router@next
```
2. 在你的 Vue 应用程序的入口文件(通常是 `main.js`)中导入并使用 Vue Router:
```javascript
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 routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
const app = createApp(App);
app.use(router);
app.mount('#app');
```
3. 在你的 Vue 应用程序中创建视图组件。例如,你可以在 `views` 文件夹中创建 `Home.vue` 和 `About.vue` 组件。
4. 在模板中使用路由链接和路由视图。例如,你可以在 `App.vue` 中使用 `<router-link>` 组件来导航到不同的路由,使用 `<router-view>` 组件来渲染当前路由的组件:
```html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
```
这就是使用 Vue 3 Router 的基本步骤。可以