vue3項(xiàng)目中如何配置路由

1、下載vue-router，在路由文件中引入相關(guān)依賴

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

2、創(chuàng)建路由信息對(duì)象數(shù)組

routes:[
{path:'/bar',component:Bar},
{path:'/foo',component:Foo},
]

3、創(chuàng)建路由管理器對(duì)象并對(duì)外拋出

const router = createRouter({
history:createWebHashHistory(),
linkActiveClass:"router-active",
routes:[]
})

4、在main.js使用use（router）方法，將路由管理器對(duì)象與當(dāng)前vue項(xiàng)目相關(guān)聯(lián)

//將配置好的路由管理器對(duì)象與當(dāng)前vue項(xiàng)目相關(guān)聯(lián)
createApp(App).use(router).mount('#app')

5、在項(xiàng)目中設(shè)置路由導(dǎo)航router-link與路由出口router-view

<router-link to="/bar">bar</router-link>
<router-link to="/foo">電影</router-link>
<router-link to="/user/1/aaa/111">user-1</router-link>
<router-link to="/user/2/bbb/212">user-2</router-link>
<router-link to="/user/3/ccc/21">user-3</router-link>
<router-view/>

常見(jiàn)面試題：route、routes、router的區(qū)別