前端框架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 中加入路由展示组件
相关推荐
静西子2 小时前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果2 小时前
vue3 全局定义动态样式
前端·javascript·vue.js
whalekv3 小时前
10月25日
前端·javascript·vue.js
xuelong-ming3 小时前
uniapp vue3 点击跳转外部网页
vue.js·uni-app
wdfk_prog6 小时前
[Linux]学习笔记系列 -- [kernel][time]alarmtimer
linux·笔记·学习
charlie1145141916 小时前
现代 Python 学习笔记:Statements & Syntax
笔记·python·学习·教程·基础·现代python·python3.13
ha20428941946 小时前
Linux操作系统学习之---基于环形队列的生产者消费者模型(毛坯版)
linux·c++·学习
dxnb226 小时前
Datawhale25年10月组队学习:math for AI+Task5解析几何
人工智能·学习
哲Zheᗜe༘6 小时前
了解学习Redis主从复制
数据库·redis·学习
井队Tell8 小时前
打造高清3D虚拟世界|零基础学习Unity HDRP高清渲染管线(第九天)
学习·3d·unity