【VUE3】0.1路由及别名配置

路由管理器

Vue Router

Vue Router 是 Vue.js 官方提供路由管理器。它与 Vue.js 核心深度集成，让构建单页面应用（Single Page Applications，SPA）变得轻而易举。

在一个标准的单页面应用中，仅有一个 HTML 页面被服务器发送到客户端。随后的页面内容都是通过 JavaScript 动态替换生成的。这时候，就需要 Vue Router 来管理这些页面的导航和组织。

安装vue-router

1	npm install vue-router

配置路由

在src目录下，创建pages文件夹，用于存放项目页面相关代码，在pages文件夹下在创建两个文件夹：
- admin：存放管理后台相关页面；
- frontend：存放前台展示相关页面，如首页、博客详情页等；
在frontend文件夹下，创建index.vue文件：
1
2
3
<template>
<h1>首页</h1>
</template>

在 src 目录下，新建 router 路由文件夹，用于存放路由相关代码，并在此文件夹下，新建 index.js 文件, 代码如下：

import Index from '../pages/frontend/index.vue'
import { createRouter, createWebHashHistory } from 'vue-router'

// 统一在这里声明所有路由
const routes = [
    {
        path: '/', // 路由地址
        component: Index, // 对应组件
        meta: { // meta 信息
            title: '首页' // 页面标题
        }
    }
]

// 创建路由
const router = createRouter({
    // 指定路由的历史管理方式，hash 模式指的是 URL 的路径是通过 hash 符号（#）进行标识
    history: createWebHashHistory(),
    // routes: routes 的缩写
    routes, 
})

// ES6 模块导出语句，它用于将 router 对象导出，以便其他文件可以导入和使用这个对象
export default router

使用 router-view 组件

是 Vue Router 的一个核心组件，它是一个功能性组件（functional component）。其主要作用是根据当前的路由（URL）动态地渲染对应的组件，相当于是一个“占位符”，它会自动渲染与当前路径匹配的组件。

作用：
1. 动态渲染组件：根据当前的 URL，自动渲染与当前路径匹配的组件。
2. 嵌套路由：在有嵌套路由的情况下，可以用于渲染嵌套的子路由组件。
应用到App.vue：
1
2
3
4
5
6
7
8
9
10
11
<template>
<router-view></router-view>
</template>

<script setup>

</script>

<style scoped>

</style>

将 Router 添加到 Vue 实例

最后，要想路由生效，还需要打开 src/main.js 文件，将 router 导入并添加到 Vue app 实例中，应用刚刚声明的路由, 最终代码如下:

// import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
// 导入路由
import router from './router'

const app = createApp(App)

// 应用路由
app.use(router)
app.mount('#app')

启动项目查看效果

Vite 配置路径别名

alias

alias 是一个用于定义路径别名的配置选项。当你的项目结构变得复杂时，路径别名可以帮助你简化 import 或 require 语句中的路径，让代码更干净、更可维护。

不配置的情况：

1 2	import Index from '../pages/frontend/index.vue' import Button from '../../../components/Button.vue';

配置后的情况：

1	import Button from '@/components/Button.vue';

修改 Vite 配置

import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      // 定义一个别名 '@'，该别名对应于当前 JavaScript 模块文件所在目录下的 'src' 目录的绝对文件路径。
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

如何使用

修改 /router/index.js

// 修改前
import Index from '../pages/frontend/index.vue'
// 修改后
import Index from '@/pages/frontend/index.vue'

修改 /main.js

// 修改前
import App from './App.vue'
import router from './router'

// 修改后
import App from '@/App.vue'
import router from '@/router'

总结

都是基础知识点，是写出优雅代码的关键，要牢记配置步骤。