前端框架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 中加入路由展示组件
相关推荐
击败不可能10 小时前
vue做任务工具方法的实现
前端·javascript·vue.js
觉醒大王10 小时前
医学好投的普刊分享
前端·论文阅读·深度学习·学习·自然语言处理·学习方法
鄭郑10 小时前
【Playwright 学习笔记 05】Xpath选择
笔记·学习
【赫兹威客】浩哥10 小时前
【赫兹威客】框架模板-前端bat脚本部署教程
前端·vue.js
wdfk_prog10 小时前
[Linux]学习笔记系列 -- [drivers][base]syscore
linux·笔记·学习
一 乐11 小时前
学生宿舍管理|基于springboot + vue学生宿舍管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·助农电商系统
呱呱巨基11 小时前
Linux Ext系列文件系统
linux·c++·笔记·学习
zpedu11 小时前
给大家普及一下,1月才开始PMP的强度
学习
yanyu-yaya12 小时前
速学兼复习之vue3章节4
前端·vue.js·前端框架
Mr-Wanter12 小时前
vue 数据反显时数字/字母不换行导致的样式问题
前端·javascript·vue.js