vue 路由

于 2018-12-05 20:21:14 发布
阅读量120 收藏 1
点赞数
分类专栏： vue router 文章标签： vue router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webhcj/article/details/84842699
版权

vue 路由

@路由
1. ？ 什么是路由
2. 使用场景
3. 路由的安装
4. 如何使用
5. 嵌套路由
编程路由
动态路由

1.> 我自己的理解是由不同的路径，显示不同组件，根据不同的组件显示不同的内容\页面。（做单页面应用）

2.>
a.单页面跳转。
b.组件与组件之间的切换。
c.局部刷新内容。
d.vue中的路由用于指定跳转特定页面，多用于单页面应用SPA

3.>
a.进入命令行安装 cnpm install vue-router --save
b.在main.js或者使用vue-router的地方，通过import来导入 import router form ‘vue-router’
vue.use(vrouter)
d. 开始路由配置
4.>
详情参照一下步骤和图纸
首先在主组件中建立子组件
src/app.vue的文件夹下建立子组件

在这里插入图片描述

第二入口文件全局注入
src/main.js

在这里插入图片描述

全局注入完了之后创建一个导航组件
在src/component/vbody/vbody.vue
router-view 渲染

在这里插入图片描述

然后创建子路由组件
第一个
src/component/vbody/one.vue

在这里插入图片描述

创建子路由组件
第二个
src/component/vbody/two.vue

在这里插入图片描述

创建完了之后开始配置路由
src/router/index.js

在这里插入图片描述

我们来看一下路由切换效果截屏吧
第一
在这里插入图片描述

第二
在这里插入图片描述

ok到这里就完成了路由跳转的实例这个是普通的路由
谢谢你的观看

小生不才如有不对请多指教

维我令狐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
vue路由文件
04-25
Vue Router是Vue.js官方支持的路由管理器，用于处理单页面应用（SPA）的导航和页面间通信。在Vue项目中，路由扮演着至关重要的角色，它允许我们根据URL来动态加载和切换不同的组件，实现页面间的平滑过渡。 Vue ...
vue路由切换时取消之前的所有请求操作
10-14
本文将详细讲解如何在Vue路由切换时取消之前的所有请求操作。 首先，我们需要了解Vue的`beforeEach`钩子函数，它是在每次路由切换前都会执行的全局守卫。我们可以在`main.js`文件中注册这个钩子，以确保在进入新的...
“人力资源+大数据+薪酬报告+涨薪调薪”
08-12
人力资源+大数据+薪酬报告+涨薪调薪，在学习、工作生活中，越来越多的事务都会使用到报告，通常情况下，报告的内容含量大、篇幅较长。那么什么样的薪酬报告才是有效的呢？以下是小编精心整理的调薪申请报告，欢迎大家分享。相信老板看到这样的报告，一定会考虑涨薪的哦。
深度报告-20231012-东海证券-电力设备与新能源行业深度报告-长时储能东风起-钒电需求待腾飞-42页-3mb.pdf
08-12
深度报告-20231012-东海证券-电力设备与新能源行业深度报告_长时储能东风起_钒电需求待腾飞_42页_3mb.pdf
基于Python+JavaScript实现的联邦学习网站系统源码+文档说明(高分毕业设计)
08-12
<项目介绍> 毕设 前端： React-Hook Material UI axios请求数据 token头请求验证 Echarts图可视化 后端： Django框架 写API运行算法传数据 在本系统中，用户通过邮箱注册后登录进入首页，可以通过导航栏快速跳转到实验设置，实验过程，实验数据查看和退出登录等，也可以通过侧边栏来选择算法进行实验，点击不同的 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
基于Springboot和Vue的公司日常考勤系统源码 公司日常考勤系统代码（优秀毕业设计）
08-12
公司日常考勤系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
vue2+vuex3+vur-router3
08-12
vue2+vuex3+vur-router3
基于Springboot和Vue的手机商城设计与开发源码 手机商城设计与开发代码（高分优秀毕业设计）
最新发布
08-12
手机商城设计与开发源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
按钮(Buttons)-Qt-思维导图-学习笔记
08-12
按钮是 Qt 中常用的控件，广泛应用于嵌入式系统和 PC 端的界面交互中。Qt 提供了六种内置按钮部件，包括 QPushButton、QToolButton、QRadioButton、QCheckBox、QCommandLinkButton 和 QDialogButtonBox。QPushButton 是最常用的下压按钮，常用于触发命令或事件。QToolButton 则多用于工具栏中的快速访问按钮，通常显示图标。QRadioButton 提供互斥选择功能，适合“多选一”场景。QCheckBox 支持多选多，常用于设置选项。QCommandLinkButton 类似于普通按钮，但带有箭头图标，指示点击后将执行进一步操作。QDialogButtonBox 用于对话框中的自定义按钮。通过信号与槽机制，这些按钮可以与各种事件和操作紧密结合，实现丰富的人机交互。
【C++期末/课程设计】学生选修课程信息管理系统(VS2022项目)
08-12
题目描述 学生选课信息包括:学号、姓名、选修课程名称、学分，开课学期。试设计一学生选课管理，使之能提供以下功能: 1)系统以菜单方式工作(用键盘输入1~7之间的数来选择功能，其中7为退出); 2)学生选课信息录入功能（包括学号、姓名、课程名称、学分、开课学期); 3)学生选课信息整体浏览功能; 4)按学号查询学生选课信息; 5)按课程名查询统计选课学生人数信息; 6)按照“选修课程名称”修改开学学期的信息; 7)按照输入的学号信息的删除学生选课信息。 8)所有数据符合实际应用要求。
毕业设计php飞机票预订查询系统-qkrp源码含文档工具包
08-12
毕业设计php飞机票预订查询系统-qkrp源码含文档工具包 php，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 3.1 管理员功能需求 （1）管理员登录和身份验证。 （2）查看站点的基本信息，包括已经注册会员的数量，管理员发布的新航班信息和注册用户 订单、留言、订购机票的数量等。 （3）管理订单源，主要是对注册用户提交的未结帐的订单进行删除操作。 （4）管理航班信息，包括增加、修改和删除航班信息。 （5）添加新航班信息，把要发布的新航班的一些相关信息录入到数据库。 （6）管理新航班信息，查看管理员发布的航班信息信息和对新航班的信息进行删除操作。 3.2 注册用户功能需求 （1）新用户的注册。 （2）用户的登录和身份验证。 （3）查询航班信息。 （4）预订机票，把用户预订机票的信息添加到数据库。 （5）取消订单，用户可以取消自己之前的订单重新订购。 （6）显示用户的订购信息。 （7）留言，用户可以发表自己的意见和想法来跟管理员交流。 （8）修改注册信息。 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程（在说明文
毕业设计php路桥管理系统-qlrp源码工具包
08-12
毕业设计php路桥管理系统-qlrp源码工具包 php，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 本系统的主要实现下面几大功能模块。学院概况 系部动态作品展示 学生管理 招生就业 专业介绍。 包含：源码、数据库脚本、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
海信电视刷机数据 LED55K300UD（2114） 生产用软件数据 务必确认机编一致 强制刷机 整机USB升级程序
08-12
务必确认机身编号与文件名机编一致，如不一致，请勿下载 机身编号一般在机子背面的贴纸上 强制升级模式： 1、下载数据，压缩包解压，将升级软件放置到U盘根目录的TargetHis文件夹（新建）（文件夹中有His3751Upgrade.bin） 2、电视关机，将U盘插入电视USB端口，交流开机，开机过程中快速连续按遥控器音量减键，将遥控器对准电视的遥控接收头 3、系统就会进入强制升级模式，升级完成黑屏，拔出U盘，再次开机 注意： 1、U盘要求使用FAT32格式，建议4G-8G的品牌U盘，刷机成功率会高 2、升级到结束，大约需要8-30分钟，中途绝对不能断电 3、升级重启第一次进入系统，请等完全正常进入开机桌面之后，才能拨下U盘
基于Springboot和Vue的林业产品推荐系统源码 林业产品推荐系统代码（优秀毕业设计）
08-12
林业产品推荐系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
基于springboot的陶瓷销售网站的设计与实现源码
08-12
本系统包括了前台用户模块和管理员模块。前台用户模块包括注册登录、陶瓷搜索、购物车、我的订单，管理员模块包括陶瓷分类管理、陶瓷管理、陶瓷入库管理、订单管理、销售数据统计。
智慧城市应急指挥中心系统平台建设方案PPT(41页).pptx
08-12
城市应急指挥系统是智慧城市建设的重要组成部分，旨在提高城市对突发事件的预防和处置能力。系统背景源于自然灾害和事故灾难频发，如汶川地震和日本大地震等，这些事件造成了巨大的人员伤亡和财产损失。随着城市化进程的加快，应急信息化建设面临信息资源分散、管理标准不统一等问题，需要通过统筹管理和技术创新来解决。 系统的设计思路是通过先进的技术手段，如物联网、射频识别、卫星定位等，构建一个具有强大信息感知和通信能力的网络和平台。这将促进不同部门和层次之间的信息共享、交流和整合，提高城市资源的利用效率，满足城市对各种信息的获取和使用需求。在“十二五”期间，应急信息化工作将依托这些技术，实现动态监控、风险管理、预警以及统一指挥调度。 应急指挥系统的建设目标是实现快速有效的应对各种突发事件，保障人民生命财产安全，减少社会危害和经济损失。系统将包括预测预警、模拟演练、辅助决策、态势分析等功能，以及应急值守、预案管理、GIS应用等基本应用。此外，还包括支撑平台的建设，如接警中心、视频会议、统一通信等基础设施。 系统的实施将涉及到应急网络建设、应急指挥、视频监控、卫星通信等多个方面。通过高度集成的系统，建立统一的信息接收和处理平台，实现多渠道接入和融合指挥调度。此外，还包括应急指挥中心基础平台建设、固定和移动应急指挥通信系统建设，以及应急队伍建设，确保能够迅速响应并有效处置各类突发事件。 项目的意义在于，它不仅是提升灾害监测预报水平和预警能力的重要科技支撑，也是实现预防和减轻重大灾害和事故损失的关键。通过实施城市应急指挥系统，可以加强社会管理和公共服务，构建和谐社会，为打造平安城市提供坚实的基础。
vue路由
05-25
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。使用 Vue Router ，我们可以实现单页面应用中的路由跳转、参数传递、路由拦截等功能。下面是 Vue Router 的基本使用步骤： 1. 安装 Vue Router：使用 npm 安装 Vue Router。 ``` npm install vue-router ``` 2. 在 main.js 中引入 Vue Router。 ``` import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例并配置路由。 ``` const router = new VueRouter({ routes: [ { path: '/home', component: Home }, { path: '/about', component: About } ] }) ``` 4. 在 Vue 实例中挂载路由。 ``` new Vue({ router, render: h => h(App) }).$mount('#app') ``` 5. 在模板中使用路由。 ``` <router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-view></router-view> ``` `to` 属性指定跳转的路径，`router-view` 显示对应路由组件的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值