vue3路由的使用

在Vue3中，路由的使用与Vue2有些许变化。下面是使用Vue Router 4.x版本的简单示例。

首先，安装路由依赖：

npm install vue-router@next

然后，创建一个路由实例。在src/router/index.js文件中，可以编写如下代码：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 其他路由配置...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

在上述代码中，我们创建了一个路由实例，指定了路由的模式为createWebHistory，并传入了一个BASE_URL，后者是在vue.config.js中配置的项目根路径。

接下来，在main.js中，需要将路由实例挂载到Vue应用中：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

在上述代码中，我们使用createApp函数来创建一个Vue应用实例，然后使用.use(router)方法将路由实例挂载到Vue应用中。

现在，可以在组件中使用路由了。在Home.vue中，可以编写如下代码来定义一个路由链接：

<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About Page</router-link>
  </div>
</template>

在上述代码中，我们使用<router-link>组件来创建一个路由链接，将to属性设置为目标路由的路径。

最后，还需要在根组件中添加一个用于渲染路由的占位符。在App.vue中，可以编写如下代码：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

在上述代码中，我们使用<router-view>组件来渲染当前匹配到的路由组件。

以上就是使用Vue3路由的简单示例。当然，除了基本的路由配置和使用外，Vue Router 4.x版本还提供了更多的功能和选项，如路由守卫、动态路由、嵌套路由等，你可以根据具体需求来使用。