vue3路由简单配置

路由目录

各文件内容

【router/index】

import { createRouter, createWebHashHistory, createWebHistory} from "vue-router";
import { scrollBehavior } from "./helpers/scroll";
import routes from "./routes"

const routerConfig={
    history : process.env.VUE_APP_ROUTER_MODE === "hash" ? createWebHashHistory() : createWebHistory(),  //路由模式，hash、history
    routes,
    scrollBehavior,
}

const setRouter = (app) => {
    app.use(createRouter(routerConfig));
};

export default {
    setRouter,
};

【router/helper/scroll.js】

export const scrollBehavior = (to, from, scrollPosition) =>{
    if (scrollPosition && to.meta.keepAlive) {
        //返回缓存页面后记录浏览位置
        return scrollPosition;
    }
    return { left: 0, top: 0 };
}

【router/routes/account.js】

const routes = [
    {
        path: "/account",
        component: ()=>import("@/layouts/blank-view"),
        children: [
            {
                path: "/account/login",
                name: "Login",
                component: ()=>import("@/views/account/login"),
                meta: {
                    title: "登录",
                },
            },
            {
                path: "/account/register",
                name: "Register",
                component: ()=>import("@/views/account/register"),
                meta: {
                    title: "注册",
                },
            },
        ]
    }
];

export default routes;

【router/routes/index.js】

//引入各模块路由分支
import AccountRoute from "./account"; //账户
import OtherRoute from "./other"; //其他

const routes = [
    {
        path: "/",
        component: ()=>import("@/layouts/basic-view"),
        children: [
            {
                path: "/",
                name: "Home",
                component: ()=>import("@/views/home/home"),
                meta: {
                    title: "首页",
                },
            },
        ],
    },
    ...AccountRoute,
    ...OtherRoute,
    {
        path: "/:pathMatch(.*)",
        name: "NotFound",
        component: ()=>import("@/views/home/not-found"),
        meta: {
            title: "页面不存在",
        },
    },
];

export default routes;

【main.js】

import { createApp } from "vue";
import App from "./App.vue";
import routerConfig from "@/router/index";

const app = createApp(App); //创建vue实例

async function setupApp() {
    /* 路由 */
    routerConfig.setRouter(app)
    app.mount("#app");
}

setupApp();