当前位置： 首页 > article >正文

Vue的路由

article 2024/12/29 10:54:55

Vue的路由

出发点：遇到多页面网页的反复跳转，有些繁琐，可以通过Vue的路由实现单页面中数据的变化

实现单页面中数据的变化（通过Vue-router来进行操作的，数据的请求获取也需要ajax异步交互），具体会通过以下步骤：

  1. 点击特定的组件会引起网页路径的变化（端口后面加了后缀）
  2. 浏览器路径发生变化，就会被Vue-router（相当于Vue里的路由器）实时监测并读取端口后变化的东西
  3. 此时Vue-router会判断变化的东西是否和已经配置的route规则比对，如果存在，则展示相应的组件
  • Vue-router组件的作用：实时监测页面路径的变化，并比对规则，做出相应的展示

一、相关理解：

1.1vue-router的理解

​ vue的一个插件库，专门用来实现SPA应用

1.2对SPA应用的理解

  1. 单页Wed应用（single page web application，SPA）
  2. 整个应用只有一个完整的页面 （vue中的index.html页面）
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过ajax请求获取

1.3对路由的理解

1.31什么是路由
  1. 一个路由就是一组映射关系（key - value）
  2. key为路径，value可能是function或component（函数或者组件）
1.32路由的分类
  • 后端路由：
    • 理解：value是function，用于处理客户端提交的请求
    • 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处
      理请求，返回响应数据。
  • 前端路由：
    • 理解：value是component，用于展示页面内容
    • 工作过程：当浏览器的路径改变时，对应的组件就会显示

二、在创建的Vue项目中使用路由

步骤：

2.1安装Vue Router

  • 如果还没有安装 Vue Router，可以通过 npm 安装：（在集成终端中写）
npm install vue-router@3

注意：如果使用的是Vue3，请安装 vue-router@4

2.2创建Vue组件

创建两个组件，这里我创建了两个完整的页面组件，EmpView.vue和RootView.vue（这两个组件中都有导航链接按钮，所以都需要给相应的按钮配置<router-link to="/">文字示例</router-link>）

  • EmpView.vue组件：
<template>
  <div>
    <el-container
      style="
        height: 800px;
        border: 1px solid #eee;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      "
    >
      <el-header
        style="
          font-size: 40px;
          background-color: rgb(238, 241, 246);
          text-align: left;
          margin-top: 0px;
        "
        >员工信息库</el-header
      >
      <el-container>
        <el-aside width="230px" style="border: 1px solid #eee;">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-message"></i>系统信息管理</template
              >
              <el-menu-item index="1-1">
                  
                <router-link to="/root">管理员管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/emp">员工管理</router-link>
                  
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 行内表单 -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="position: relative; right: 310px">
            <el-form-item label="姓名">
              <el-input
                v-model="formInline.user"
                placeholder="请输入用户姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="注册时间">
              <el-date-picker
                v-model="formInline.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                placeholder="选择日期范围"
              ></el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格 -->
          <el-table :data="tableData">
            <el-table-column
              prop="name"
              label="姓名"
              width="180"
            ></el-table-column>
            <el-table-column
              label="图像"
              width="180"
            >
            <!-- 添加插槽 -->
            <template slot-scope="scope">
              <img :src="scope.row.image" alt="图片加载失败" width='100px'>
            </template>

            </el-table-column>
            <el-table-column
              label="性别"
              width="140"
            >
            <!-- 添加插槽 -->
            <template slot-scope="scope">
              {{scope.row.gender == 1 ? '男' : '女'}}
            </template>
            </el-table-column>
            <el-table-column
              prop="job"
              label="职位"
              width="140"
            ></el-table-column>
            <el-table-column
              prop="entrydate"
              label="入职日期"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="updatetime"
              label="最后操作时间"
              width="230"
            ></el-table-column>
            <el-table-column label="操作">
              <el-button type="primary" size="mini">编辑</el-button>
              <el-button type="danger" size="mini">册除</el-button>
            </el-table-column>
          </el-table>

          <br>

          <!-- 设置分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            layout="sizes, total, prev, pager, next, jumper"
            :total="1000"
            style=" position: relative; right: 470px"
          >
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script>
import axios from 'axios';
export default {
  name: 'EmpView',
  data() {
    return {
      tableData: [],
      formInline: {
        user: "",
        region: "",
        dateRange: [],
      },
    };
  },
  methods: {
    onSubmit: function () {
      alert(JSON.stringify(this.formInline));
      console.log("Submit!");
    },
    handleSizeChange: function(val) {
      alert("每页的记录数发生变化" + val)
    },
    handleCurrentChange: function(val) {
      alert("页码发生变化" + val)
    }
  },
  mounted() {
    console.log("mounted 钩子执行");
    // 发送异步请求，获取数据
    axios.get("https://yapi.pro/mock/380899/usergetid").then((result => {
        console.log(result.data);
        this.tableData = result.data.data;

    })).catch(error => {
      console.error("获取数据失败:", error);
    });
  }
};
</script>

<style>
</style>
  • RootView.vue组件：
<template>
  <el-container
    style="
      height: 800px;
      border: 1px solid #eee;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    "
  >
    <el-header
      style="
        font-size: 40px;
        background-color: rgb(238, 241, 246);
        text-align: left;
        margin-top: 0px;
      "
      >员工信息库</el-header
    >
    <el-container>
      <el-aside width="230px" style="border: 1px solid #eee">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-message"></i>系统信息管理</template
            >
            <el-menu-item-group>
              <el-menu-item index="1-1">
                  
                <router-link to="/root">管理员管理</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">
                <router-link to="/emp">员工管理</router-link>
                  
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="empname" label="名称" width="180">
          </el-table-column>
          <el-table-column prop="EndUseTime" label="最后操作时间">
          </el-table-column>
          <el-table-column fixed='right' label='操作'>
            <template >
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
    name: 'RootView',

};
</script>

<style>
</style>

2.3设置路由

在项目中创建一个router.js文件，用来设置路由

import Vue from "vue";
import Router from "vue-router";
import EmpView from "./components/element/EmpView";
import RootView from "./components/element/RootView";

Vue.use(Router);

const routes = [
    { path : '/emp', name: 'emp' ,component: EmpView},
    { path : '/root', name: 'root' , component: RootView},
    // 配置根路径
    { path : '/', redirect: '/emp'}
];

const router = new Router({
    mode: 'history',
    routes
});

export default router;

解释：

  1. 先导入Vue框架、Vue Router插件、要进行路由的组件

  2. 通过调用Vue.use()方法，将Router插件注册到Vue实例中，使用Vue Router插件

  3. 定义路由数组，每个对象代表一个路由配置

    • path：定义了这个路由的 URL 路径，当用户访问 /emp 时，Vue Router 会渲染 EmpView 组件。

    • component：指定当路径匹配时要加载的组件。

  4. 配置根路径：即页面打开的默认路径

    • path: '/'：在这里，'/' 表示根路径，也就是用户访问网站的基本 URL（例如 http://example.com/）。

    • redirect: '/emp'：这个属性指定了重定向的目标路径。当用户访问根路径 '/' 时，Vue Router 会自动将其重定向到 '/emp' 路径。

  5. 创建Router实例：

    1. const router = new Router({...})：创建一个新的 Router 实例，配置路由的行为。
    2. mode: 'history'：
      • 选择使用 HTML5 的 History API，这允许使用更美观的 URL（例如 /a 和 /b），而不是带有哈希符号的 URL（例如 /#/a 和 /#/b）。
      • 使用 history 模式时，需要确保服务器端配置正确，以处理直接访问 URL 时返回正确的页面。
    3. routes：将之前定义的路由数组传递给 Router 实例，告诉 Router 应该如何处理不同的 URL。

  6. 导出Router实例：将创建的 router 实例导出，以便在其他地方（例如主应用文件 main.js）导入和使用。这样可以在 Vue 实例中将路由器与应用关联起来，从而实现路由功能。

2.4在主应用中使用路由

在主应用文件（例如 main.js）中引入并使用路由。

import Vue from 'vue';
import App from './App.vue';
// 引入路由
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

2.5创建主组件

在你的主组件（App.vue）中添加 <router-view>（也可以在这里创建<router-link to="/">文字示例</router-link>导航链接）

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>

这里的<router-view>的主要功能是根据当前的路由状态动态渲染相应的组件。当用户导航到一个新路由时，Vue Router 会查找与该路由匹配的组件，并将其插入到 <router-view> 的位置。

演示：

  • 运行默认页面：

在这里插入图片描述

  • 点击管理员管理

在这里插入图片描述

  • 点击员工管理

在这里插入图片描述

简单的路由实现完毕！


http://www.kler.cn/a/392664.html

相关文章：

  • 汽车行业的MES系统方案（附案例资料合集）
  • Fama MacBeth两步法与多因子模型的回归检验
  • JVM学习-内存结构（一）
  • Selenium实践总结
  • Java 深拷贝全面解析
  • Kubernetes 安装 Nginx以及配置自动补全
  • 数据分析-系统认识数据分析
  • 快速掌握——python类 封装[私有属性方法]、继承【python进阶】(内附代码)
  • 浏览器添加翻译扩展
  • 系统架构设计师（第二版）常见英语（更新中）
  • Qwen2-VL：发票数据提取、视频聊天和使用 PDF 的多模态 RAG 的实践指南
  • 字节、快手、Vidu“打野”升级，AI视频小步快跑
  • 卷积神经网络CNN
  • 使用 Sparkle 实现 macOS 应用自定义更新弹窗
  • DRL算法：DRL算法的核心；AlphaGo中，深度学习和强化学习的具体体现；当前最流行的深度强化学习（DRL）模型PPO
  • 二、神经网络基础与搭建
  • 网站架构知识之Ansible剧本（day022）
  • Qt 正则表达式提取文件中的 USB 设备 ID
  • Spring Boot 启动时自动配置 RabbitMQ 交换机、队列和绑定关系
  • Anolis8.2系统中搭建python环境
  • uniapp+vue2 设置全局变量和全局方法 （兼容h5/微信小程序）
  • vue3+ts+antd 运行报错 convertLegacyToken is not a function
  • SQL集合运算
  • 除了 Postman，还有什么好用的 API 管理工具吗？
  • LeetCode【0033】搜索旋转排序数组
  • C/C++基础知识复习（20）