开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

一、使用路由

路由的本质就是一种对应关系，在前端路由中往往与界面页面对应，根据不同的URL请求，返回对应不同的资源，也就是不同的页面。一句话概括：url地址和真实的资源之间就有一种对应的关系，就是路由。

下面为大家讲讲如何在vue中使用路由。

---

1）安装vue-router

yarn add vue-router

---

2）注册路由

将两个组件Home、Project注册到路由中：

import { createApp } from "vue";
import { createRouter, createWebHashHistory } from 'vue-router';
import App from "./App.vue";
const Home = { render(){ return 'Home'} }
const Project = { render(){ return 'Project'} }
const routes = [
    { path: '/', component: Home },
    { path: '/project', component: Project },
  ]
const app = createApp(App);
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
});
app.use(router);
app.mount("#app");

---

3）使用路由

App.vue文件加入如下代码：

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

---

效果如下：

---

---

二、配置vite.alias简化导入写法

平时我们导包的路径可能会很长，例如：../../compents/layout 我们可以通过一些配置来简化导入，达到这样的效果@/compents/layout，下面为大家介绍一下如何使用：

1）安装@types/node

yarn add @types/node

2）修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }
})

3）修改tsconfig.JSON （不修改没有提示）

在compilerOptions中加入下面配置：

 "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]     //格式一定要写对符号*不能少不然找不到@或者没有代码提示
    },

---

---

效果如下：

---

可以看到成功缩减了我们的导入语句长度，让导入变得更加简洁方便了。