从0-1搭vue3前端后进了精神病院（3）-- 路由

安装路由

cd 项目名称
npm install vue-router@4

配置简单路由

在src下创建页面目录pages或views，看个人喜好，并在内部先创建两个简单的目录

• base：存放一些通用页面如 404 403等
• home

配置路径@

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import {resolve} from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 路径配置start
  resolve:{
    alias: {
      '@': resolve(__dirname, './src')
    },
  }
  // 路径配置end
})

如果const path = require('path')报红，说明缺少依赖包，可根据缺少的进行npm i安装，我的提示是ts报的，缺少type/node：npm i --save-dev @types/node

配置路由文件

src下新建router文件夹，新建index.ts

import { createRouter, createWebHashHistory } from 'vue-router'

const routes=[
  {
    path:'/',
    redirect:'/home',
    meta:{
      title:'首页'
    }
  },
  {
    path: "/Home",
    name: "Home",
    component: () => import('@/views/home/index.vue'),
    meta: { title: '首页' },
    children: []
  }, {
    path: "/404",
    name: "NotFound",
    component: () => import('@/views/base/404.vue'),
    meta: { title: '404页面' },
    children: []
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior() {
    return {
      top: 0
    }
  }
})

// 路由拦截
router.beforeEach((to, from, next) => {
  if (to.matched.length === 0) {
    // 不存在的路由地址
    next('/404')
  } else {
    next()
  }
})

router.afterEach((to, from) => {
})

export default router

这里会报错，原因是我们使用的是typescript，虽然我们配置了vite.config的别名，但是ts是不知道的，所以要配置tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": "./", //新增
    "paths": {
      "@/*": ["./src/*"] //新增
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "references": [{ "path": "./tsconfig.node.json" }]
  }

app.vue路由配置

<template>
  <router-view v-slot="{Component}">
    <transition name="el-fade-in" mode="out-in">
      <component :is="Component"></component>
    </transition>
  </router-view>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>

main.ts引用路由

import router from '@/router/index'


createApp(App)
    .use(router)
    .mount('#app')

全部配置完之后，确认下依赖下载，下载一下依赖包，并执行

npm i
npm run dev