技术分享 | 测试平台开发-前端开发之Vue router路由设计

简介: 这里的路由是指的页面之间的路径管理器,简单的理解为 vue-router 就是链接路径的管理系统。vue-router 是 Vue.js 官方的路由插件,它和 vue.js 是深度集成的,适合用于构建单页面应用。vue-router 就是将组件映射到路由上面。在 vue-router 单页面应用中,是路径之间的切换,也就是组件的切换。## vue router 路由配置在 Vue 中,路
更多技术文章分享和免费资料领取
https://qrcode.testing-studio.com/f?from=Aliyun&url=https://ceshiren.com/t/topic/16586
这里的路由是指的页面之间的路径管理器,简单的理解为 vue-router 就是链接路径的管理系统。vue-router 是 Vue.js 官方的路由插件,它和 vue.js 是深度集成的,适合用于构建单页面应用。vue-router 就是将组件映射到路由上面。在 vue-router 单页面应用中,是路径之间的切换,也就是组件的切换。

vue router 路由配置

在 Vue 中,路由的配置都是在 router 中的 index.js 中进行的配置。
例如:
首先在 components 创建两个 Vue 组件,分别是 SignIn.vue 和 SignUp.vue。这两个文件的内容分别是
SignIn.vue

<template>
    <div class='login-form'> 
        <h1>登录</h1>
        <v-text-field label="用户名"></v-text-field>
        <v-text-field type="password" label="密码"></v-text-field>
        <v-btn color='primary'>登录</v-btn>
        <v-btn color='primary' text>注册</v-btn>
    </div>
</template>

SignUp.vue

<template>
    <div class='sign-up'>
        <h1>注册</h1>
        <v-text-field lable="用户名"></v-text-field>
        <v-text-field lable="密码" type='password'></v-text-field>
        <v-text-field lable="邮箱"></v-text-field>
        <v-btn color='primary'>注册</v-btn>
        <v-btn color='primary' text>去登陆</v-btn>
    </div>
</template>

这两个页面分别是登录界面和注册界面,这就需要用到 router 中的 index.js 文件来管理路由了。

首先我们在已有的项目中找到 index.js 的文件,默认内容如下:

// 配置路由规则
const routes = [
  {
    path: '/',   // 网页的的根路径,即首页
    name: 'Home',  // 唯一标识,用于识别作用
    component: Home   // 关联组件
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/About.vue')
    }
  }
]

现在将上述的 SignIn.vue 和 SignUp.vue 两个组件进行配置。
首先是要在 index.js 里面配置两个组件的路由

1、在 index.js 导入这两个组件

import SignIn from '../components/SignIn.vue'
import SignUp from '../components/SignUp.vue'

2、在 index.js 配置路由信息

  {
    path:'/',          # 这里的 path:'/' 是页面可以访问的路径
    name:'SignIn',     # 作为这个路由的标识
    component:SignIn   # 指定组件
  },
  {
    path:'/sign-up',
    name:'SignUp',
    component:SignUp
  }

3、接下来就是如何触发页面之间的跳转,首先是需要在页面下的

<script>
export default {
    methods: {
            signUp(){
            this.$router.push({name:'SignUp'})  # 这里的 name:'SignUp' 是在 index.js 路由配置 name
        }
    }
}

4、给控件绑定一个事件,这里使用 @click='signUp()' 监控点击事件。当点击这个 button 的时候,就会触发 signUp 方法。

<v-btn color='primary' text @click="signUp()">注册</v-btn>

vue router 路由设计就先说到这里啦,大家可以多多练习一下哦~

原文链接

⬇️ 点击“下方链接”,提升测试核心竞争力!

更多技术文章分享和免费资料领取
https://qrcode.testing-studio.com/f?from=Aliyun&url=https://ceshiren.com/t/topic/16586
相关文章
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
304 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
479 12
|
8月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
350 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
9月前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
500 1
|
10月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
675 5
|
11月前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
12月前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
109 1
|
12月前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
288 1
|
12月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
1552 0
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
879 14