在 vue3 中使用 vue-router 的基本步骤如下:
1. 安装 vue-router:
npm install vue-router@4
2. 创建一个 vue-router 实例并定义路由:
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/about', component: About },
],
});
3. 将 vue-router 实例提供给 vue 应用:
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.use(router);
app.mount('#app');
4. 在 vue 组件中使用 <router-link>
和 <router-view>
:
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template>
以上是 vue3 中使用 vue-router 的基本示例。在实际应用中,你可能需要根据具体需求进行更复杂的配置,比如嵌套路由、导航守卫等。