vue3项目中如何配置路由

vue3项目中如何配置路由

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

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

2、创建路由信息对象数组

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

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

const router=createRouter(options:{history : createWebHashHistoryO,routes})//将路由管理器对象对外抛出export default router

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

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

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

 

<template>
<router-link to="/bar">bar menu &nbsp;&nbsp; &nbsp;
</router-link><router-link to="/foo">foo menu &nbsp; &nbsp; &nbsp;
</router-link><template>
<router-link to="/bar">bar menu &nbsp;&nbsp; &nbsp;</router-li
nk>
<router-link to="/foo">foo menu &nbsp; &nbsp; &nbsp;</router-li
nk>
<router-link to="/user/1/tom/18">user 1 &nbsp;&nbsp;</router-link>
<router-link to="/user/2/bob/20">user 2 &nbsp; </router-link>
<router-link to=" /user/3/mary/21">user 3</router-link><router-view/>
</template>

 

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({}