《vue3项目开发实战》之项目配置（router路由）

1.安装

npm install vue-router@4

2.引入项目

在main.ts文件中引入路由

import router from './router'

main.ts文件内容

import { createApp } from "vue";
import App from "./App.vue";
// 引入路由
import router from "./router";


createApp(App).use(router).mount("#app");

3.创建路由文件

创建路由文件：src/router/index.ts，src/router/routes.ts

index.ts：路由创建、守卫等

routes.ts：自定义路由

//index.ts文件

import { createRouter, createWebHashHistory } from "vue-router";
// import { createRouterGuards } from './router-guards'

import routes from "./routes";
import { type App } from "vue";

const router = createRouter({
  routes,
  // 用createWebHashHistory来创建一个hash路由，当然也可以使用createWebHistory来创建history路由
  history: createWebHashHistory(),
});

// 导航守卫
router.beforeEach((to, from, next) => {
  next();
});

export function setupRouter(app: App) {
  app.use(router);
  // 创建路由守卫
  // createRouterGuards(router)
}

export default router;

routes.ts文件

export default [
  {
    path: "/",
    name: "index",
    component: async () => await import("/@/view/index.vue"),
    children: [],
  },
];

index.vue 文件

<template>
  <div>HelloWorld</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Index-1",
  props: {},
  components: {},
  setup() {
    return {};
  },
});
</script>

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

4.使用

在App.vue文件中增加 <router-view></router-view>，这样就可以按路由显示

<template>
  <router-view></router-view>
</template>

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

<style scoped></style>

5.启动项目

npm run dev