当前位置：首页 > article >正文

Vue3 -- 搭建项目路由【vue-router！！！】

article 2024/11/20 16:19:08

引言：

首先我们分析一下对于一个项目有哪些必要路由；登录界面的Login一级路由、进入主页面的Home一级路由、404页面一级路由、任意不正确路由（指向404）。

配置路由：

路由的安装：

pnpm install vue-router

准备工作：

先配置一些vue界面，在跳转时候区分展示：
在这里插入图片描述

<template>
  <div>我是一级路由--登录页面</div>
</template>

<script setup lang="ts" name="Login"></script>

<style lang="sass" scoped></style>

配置：

routes.ts:
在这里插入图片描述

// 对外暴露配置路由(常量路由)
export const constantRoute = [
  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    name: "login" // 命名路由（做权限用到）
  },
  {
    path: "/",
    component: () => import("@/views/home/index.vue"),
    name: "layout"
  },
  {
    path: "/404",
    component: () => import("@/views/404/index.vue"),
    name: "404"
  },
  {
    // 捕获所有不匹配其他路由的路径
    path: "/:pathMatch(.*)*",
    redirect: "/404",
    name: "Any"
  }
];

index.ts:
在这里插入图片描述

// 通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from "vue-router";
import { constantRoute } from "./routes.ts";

// 创建路由
let router = createRouter({
  // hash路由模式
  history: createWebHashHistory(),
  routes: constantRoute,
  // 滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0
    };
  }
});

export default router;