前端框架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 中加入路由展示组件
相关推荐
Дерек的学习记录5 小时前
C++:入门基础(下)
开发语言·数据结构·c++·学习·算法·visualstudio
小小前端--可笑可笑6 小时前
Vue / React 单页应用刷新 /login 无法访问问题分析
运维·前端·javascript·vue.js·nginx·react.js
小林敲代码77886 小时前
记一次 Vue 项目首屏优化:从 7.1s 到 0.9s,深挖 Gzip 的力量
前端·javascript·vue.js
前路不黑暗@6 小时前
Java项目:Java脚手架项目的公共模块的实现(二)
java·开发语言·spring boot·学习·spring cloud·maven·idea
哎呦 你干嘛~8 小时前
MODBUS_RTU485通讯主站(配置部分)
学习
myzzb8 小时前
纯python 最快png转换RGB截图方案 ——deepseek
开发语言·python·学习·开源·开发
半兽先生10 小时前
告别 AI 乱写 Vue!用 vue-skills 构建前端智能编码标准
前端·vue.js·人工智能
前端达人10 小时前
都2026年了,还在用Options API?Vue组合式API才是你该掌握的“正确姿势“
前端·javascript·vue.js·前端框架·ecmascript
被遗忘在角落的死小孩10 小时前
抗量子 Winternitz One Time Signature(OTS) 算法学习
学习·算法·哈希算法
浅念-10 小时前
C++ :类和对象(4)
c语言·开发语言·c++·经验分享·笔记·学习·算法