前端框架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 中加入路由展示组件
相关推荐
强子感冒了30 分钟前
MYSQL学习笔记:DML & DQL 核心语法
笔记·学习·mysql
Amumu121387 小时前
Vue组件化编程
前端·javascript·vue.js
嗯嗯=8 小时前
STM32单片机学习篇9
stm32·单片机·学习
m0_637256589 小时前
vue-baidu-map添加了类型组件导致非常卡顿的问题
前端·javascript·vue.js
挂机且五杀9 小时前
为什么在React地图组件里,memo 不是优化,而是生存?
前端·react.js·前端框架
ooo-p9 小时前
FPGA学习篇——Verilog学习之“呼吸灯”
学习·fpga开发
刘一说9 小时前
Vue开发中的“v-model陷阱”:为什么它不能用于非表单元素?
前端·javascript·vue.js
求真求知的糖葫芦9 小时前
微波工程4.2节阻抗与导纳矩阵学习(自用)
笔记·学习·线性代数·矩阵·射频工程
利刃大大10 小时前
【Vue】组件生命周期 && 组件生命周期钩子
前端·javascript·vue.js·前端框架
炽烈小老头10 小时前
【 每天学习一点算法 2026/01/26】缺失数字
学习·算法