1、vue3路由搭建
"vue-router": "^4.2.4"
2、在src目录下创建文件夹和文件
src
router
index.js
routes.js
3、/src/router/index.js
// 通过vue-router插件实现模块路由配置
import { createRouter, createWebHashHistory } from "vue-router";
import { constantRoute } from "./routes";
// import { useStore } from "@/store/modules/socket.js";
// 创建路由器
let router = createRouter({
// 路由模式hash
history: createWebHashHistory(),
routes: constantRoute,
// 滚动行为
scrollBehavior() {
return {
left: 0,
top: 0,
};
},
});
router.beforeEach((to, form, next) => {
// const store = useStore();
next();
});
export default router;
4、/src/router/routes.js
下面所需页面需要自己去创建和配置
// 对外暴露配置路由(常量路由)
export const constantRoute = [
{
//登录成功以后展示数据的路由 tip:路由只有一个孩子,侧边栏直接展示孩子
path: "/",
component: () => import("@/layout/index.vue"),
name: "layout",
redirect: "/home",
children: [
//二级路由
{
path: "/home",
component: () => import("@/views/home/index.vue"),
meta: {
title: "首页",
showBgImage: true,
},
},
{
path: "/category",
component: () => import("@/views/category/index.vue"),
meta: {
title: "分类",
showBgImage: true,
},
},
],
},
{
//404
path: "/404",
component: () => import("@/views/404/index.vue"),
name: "404",
meta: {
title: "404",
},
},
{
//任意路由:
path: "/:pathMatch(.*)*",
redirect: "/404",
name: "Any",
meta: {
title: "登任意路由",
},
},
];
5、这上面配置是有layout,所以需要创建src/layout文件夹,里面有index.vue文件
<template>
<div>
<router-view></router-view>
</div>
</template>
<script setup></script>
<style scoped></style>
6、App.vue
<template>
<div class="container">
<router-view></router-view>
</div>
</template>
<script setup></script>
<style scoped></style>
7、main.js入口文件
import { createApp } from "vue";
import App from "./App.vue";
// 路由
import router from "@/router/index";
const app = createApp(App);
app.use(router);
app.mount("#app");