vue3 路由搭建（包含layout组件）

最新推荐文章于 2025-04-07 15:10:53 发布

xugyw

最新推荐文章于 2025-04-07 15:10:53 发布

阅读量884

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_65116989/article/details/134252474

版权

本文详细介绍了如何在Vue3中使用vue-router4.2.4进行路由搭建，包括创建文件结构、配置index.js和routes.js，以及如何在App.vue和main.js中应用。重点涉及模块路由、layout组件和404处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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");