Router是什么?

在 Vue 3 中，Router 是用于管理应用路由的核心工具，通常通过 vue-router 库实现。它允许开发者定义单页应用（SPA）中的路由，并根据 URL 的变化动态加载不同的组件。

主要功能

  1. 路由映射：将 URL 路径映射到对应的 Vue 组件。
  2. 动态路由：支持带参数的路由，如 /user/:id。
  3. 嵌套路由：允许在组件内嵌套其他路由。
  4. 导航控制：提供编程式导航（如 router.push）和路由守卫（如 beforeEach）。
  5. 懒加载：支持异步加载路由组件，优化性能。

基本用法（创建和使用路由）

  1. 安装：

    1
    npm install vue-router@4

  2. 配置路由：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import { createRouter, createWebHistory } from 'vue-router';
    import Home from './components/Home.vue';
    import About from './components/About.vue';

    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ];

    const router = createRouter({
      history: createWebHistory(),
      routes
    });

    export default router;

  3. 在应用中使用：

    1
    2
    3
    4
    5
    6
    7
    import { createApp } from 'vue';
    import App from './App.vue';
    import router from './router';

    const app = createApp(App);
    app.use(router);
    app.mount('#app');

  4. 在组件中使用：

    • 使用 <router-link> 进行导航：

      1
      2
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>

    • 使用 <router-view> 显示路由组件：

      1
      <router-view></router-view>

在项目中创建和配置路由（项目配置从这里看起）

**Router官网链接：**https://router.vuejs.org/zh

  1. 安装

    • 通过查看官方文档我们了解到4种Vue Router的安装方法。我通常使用npm，如下

      1
      x npm install vue-router@4

    • 下载完毕后可以在项目的package.json文件看到vue-Router版本，例如：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
         "axios": "^1.7.7",
         "dayjs": "^1.11.13",
         "element-plus": "^2.9.3",
         "less": "^4.2.0",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5",		// vue-router版本
         "vuex": "^4.0.2",
         "vuex-persistedstate": "^4.1.0"
       },

  2. 配置并挂载Vue3项目路由

    • 创建路由配置文件：在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
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      // src/router/index.js
      import { createRouter, createWebHistory } from 'vue-router';

      // 导入组件
      import Layout from '../views/Main.vue'
      import Login from '../views/login/index.vue'
      import User from '../views/User/index.vue';

      // 定义路由
      const routes = [
        {
          path: '/', // 路径
          name: 'main', // 路由名称
          component: Layout // 对应的组件
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
          path: '/user/:id', // 动态路由
          name: 'User',
          component: User
        }
        
      ];

      // 创建路由实例
      const router = createRouter({
        // 路由匹配模式
        history:createWebHashHistory(), // 使用 Hash 的 History 模式
        // 路由数据
        routes 
      });

      // 导出路由实例
      export default router;

      • **路由匹配模式（历史模式）**有三种：Hash模式，Memory 模式，Html5模式

        在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择。

        具体的历史模式介绍可在官方文档中查看：https://router.vuejs.org/zh/guide/essentials/history-mode.html

  3. 在 main.js 中挂载路由
    在 Vue 3 的入口文件（通常是 main.js 或 main.ts）中，将路由挂载到 Vue 实例。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // src/main.js
    import { createApp } from 'vue';
    import App from './App.vue';
    import router from './router'; // 导入路由配置

    // 创建 Vue 应用
    const app = createApp(App);

    // 使用路由
    app.use(router);

    // 挂载应用
    app.mount('#app');

  4. 在 App.vue 文件中使用路由

    在应用的主组件中定义路由导航和路由视图的渲染位置。

    使用 <router-link> 实现导航，使用 <router-view> 渲染匹配的组件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // src/App.vue
    <template>
      <RouterView />
    </template>
    <script setup>

    </script>
    <style scoped>

    </style>
    • <RouterView /> 是 vue-router 提供的一个内置组件，用于渲染当前路由匹配的组件。
    • **当 URL 发生变化时，<RouterView /> 会自动切换并渲染对应的组件。**例如：当路径为 /login 时，出现 /src/router/index.js 文件中路由数据内对应的 ../views/login/index.vue 组件的内容。

  5. 创建视图组件

    在 src/views 目录下创建路由对应的组件文件，例如：

    • /login/index.vue
    • /auth/index.vue
    • /User/index.vue

  6. 运行文件，通过不同的路径，测试路由配置效果