vue3项目中如何配置路由
1、下载vue-router,在路由文件中引入相关依赖
import {createRouter,createWebHashHistory} from 'vue-router';
2、创建路由信息对象数组
routes:[
{path:'/bar',component:Bar},
{path:'/foo',component:Foo},
]
3、创建路由管理器对象并对外抛出
const router = createRouter({
history:createWebHashHistory(),
linkActiveClass:"router-active",
routes:[]
})
4、在main.js使用use(router)方法,将路由管理器对象与当前vue项目相关联
//将配置好的路由管理器对象与当前vue项目相关联
createApp(App).use(router).mount('#app')
5、在项目中设置路由导航router-link与路由出口router-view
<router-link to="/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/>
补充知识:
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({}