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/>

route routes router的区别

1.route：一组路由信息对象:{ path: '/Foo', component: Foo },

2.routes：路由信息对象数组:

const routes= [

        { path: '/', redirect: '/User' },

        { path: '/User', component: User },

        { path: '/Foo', component: Foo },

        { path: '/Bar', component: Bar }

    ]

3.router：路由管理器对象：const router=createRouter({       })