vue3中如何配置路由

1.下载vue-router,在路由文件中引入相关依赖

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

import Foo from "../components/Foo.vue";
import Bar from "../components/Bar.vue";
import User from "../components/User.vue";

2创建路由信息对象数组

const routes=[
    {path:'/foo',component:Foo},//route 每一组路由信息对象
    {path: '/bar',component: Bar},
    //动态路由的设置

    {path:'/user/:id/:name/:age',component: User,props:true}
]

　　

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

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

)
//经路由管理器对外抛出
export default router;

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

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

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

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

<div>
    <h6>路由导航</h6>
    <div>
      <router-link to="/foo">foo</router-link>
      <router-link to="/bar">bar</router-link>
      <router-link to="/user/1/xiaohong/18">user1</router-link>
      <router-link to="/user/2/xiao/18">user2</router-link>
      <router-link to="/user/3/xhah/18">user3</router-link>
    </div>
    <h6>路由出口</h6>
    <router-view></router-view>
  </div>