可爱静

记录生活、学习和工作

0%

【VUE3】0.1路由及别名配置

发表于 分类于
本文字数： 2.7k 阅读时长 ≈ 2 分钟

路由管理器

Vue Router

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

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

安装vue-router

1
npm install vue-router

配置路由

  1. 在src目录下，创建pages文件夹，用于存放项目页面相关代码，在pages文件夹下在创建两个文件夹：

    • admin：存放管理后台相关页面；

    • frontend：存放前台展示相关页面，如首页、博客详情页等；

  2. 在frontend文件夹下，创建index.vue文件：

    1
    2
    3
    <template>
        <h1>首页</h1>
    </template>

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    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

  4. 使用 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>

  5. 将 Router 添加到 Vue 实例

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 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')

  6. 启动项目查看效果

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 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

1
2
3
4
// 修改前
import Index from '../pages/frontend/index.vue'
// 修改后
import Index from '@/pages/frontend/index.vue'

修改 /main.js

1
2
3
4
5
6
7
// 修改前
import App from './App.vue'
import router from './router'

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

总结

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