前端框架Vue学习 ——(七)Vue路由(Vue Router)

文章目录


Vue路由使用场景

使用场景:如下图,点击部门管理的时候显示部门管理的组件,员工管理的时候显示员工管理的组件。

前端路由:指的是 URL 中的 hash(#号)与组件之间的对应关系。

Vue Router 介绍

介绍:Vue Router 是 Vue 的官方路由

组成:

  • VueRouter:路由器类,根据路由请求在路由视图中动态渲染选中的组件
  • <router-link>:请求链接组件,浏览器会解析成 <a>
  • <router-view>:动态视图组件,用来渲染展示与路由路径对应的组件


Vue Router 使用

注意: 路由信息在 src/router/index.js 中配置

安装 Vue Router

要实现的效果

  1. router/index.js 中配置路由信息
  1. 在相应的 views/tlias/DeptView.vue和EmpView.vue 中加路由链接组件
  1. App.vue 中加入路由展示组件
相关推荐
momo061171 分钟前
用一篇文章带你手写Vue中的reactive响应式
javascript·vue.js
狗哥哥6 分钟前
前端基础数据中心:从混乱到统一的架构演进
前端·vue.js·架构
淳杰11 分钟前
【Androidstudio】学习/采坑笔记-冷重启和热重启(reboot)
笔记·学习
大布布将军34 分钟前
一种名为“Webpack 配置工程师”的已故职业—— Vite 与“零配置”的快乐
前端·javascript·学习·程序人生·webpack·前端框架·学习方法
JosieBook36 分钟前
【Vue】02 Vue技术——搭建 Vue 开发框架:在VS Code中创建一个Vue项目
前端·javascript·vue.js
计算机学姐36 分钟前
基于Python的商场停车管理系统【2026最新】
开发语言·vue.js·后端·python·mysql·django·flask
q_191328469543 分钟前
基于SpringBoot2+Vue2的宠物上门服务在线平台
java·vue.js·spring boot·mysql·宠物·计算机毕业设计·源码分享
rockmelodies1 小时前
CVE-2025-55182:React Server Components 断点跟踪
前端·react.js·前端框架
涔溪1 小时前
整理vue3+ vite 开发经常会遇到的问题。
前端·vue.js·typescript
GIS学姐嘉欣1 小时前
学习GIS开发,你需要了解的基本概念(含WebGIS编程语言应用方向等)
学习·gis·gis开发·webgis