前端框架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 中加入路由展示组件
相关推荐
车端域控测试工程师37 分钟前
Autosar网络管理测试用例 - TC003
c语言·开发语言·学习·汽车·测试用例·capl·canoe
hd51cc41 分钟前
动态链接编程 学习笔记
笔记·学习
q***T5831 小时前
GitHub星标20万+的React项目,学习价值分析
前端·学习·react.js
小马爱打代码1 小时前
Consul:系统学习笔记
笔记·学习·consul
笙年1 小时前
Vue 作用域插槽
前端·javascript·vue.js
鱼锦0.03 小时前
基于spring+vue把图片文件上传至阿里云oss容器并回显
java·vue.js·spring
zeijiershuai3 小时前
Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件
前端·javascript·vue.js
会编程的李较瘦3 小时前
【Spark学习】数据清洗
学习·ajax·spark
人工智能训练3 小时前
前端框架选型破局指南:Vue、React、Next.js 从差异到落地全解析
运维·javascript·人工智能·前端框架·vue·react·next.js