vue3如何配置路由

1.首先通过命令行在相关文件夹下下载vue-router（npm i  vue-router)，在路由文件中引入相关依赖

import { createRouter, createWebHashHistory } from "vue-router";

2.创建路由信息对象数组:

path:路径参数     component：获取跳转页面的地址   redirect：重定向路由

const routes= [
        { path: '/', redirect: '/User' },
        { path: '/User', component: User },
        { path: '/Foo', component: Foo },
        { path: '/Bar', component: Bar }
    ]

3.创建路由管理器对象并对外抛出

const router = createRouter({
    history: createWebHashHistory(),
    routes

4.在main.js使用use（router）方法，将路由管理器对象与当前vue项目相关联

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

5.在项目中设置路由导航router-link与路由出口router-view

<router-link to="/User">user</router-link>
<router-link to="/Foo">foo</router-link>
<router-link to="/Bar">bar</router-link>
<router-view/>

6.补充：route、routes、router的区别

route:一组路由信息对象 

{ path: '/foo路径', component: Foo 子页面}

routes:路由信息对象数组

const routes = [{ path: '/foo' , component: Foo },{ path: '/bar", component: Bar },{ path: '/user', component: User }

router:路由管理器对象

const router = createRouter({}