前端框架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 中加入路由展示组件
相关推荐
点亮一颗LED(从入门到放弃)38 分钟前
C语言学习笔记
笔记·学习
找了一圈尾巴1 小时前
Python 学习-深入理解 Python 进程、线程与协程(下)
开发语言·python·学习
chenhdowue1 小时前
vxe-table 数据校验的2种提示方式
vue.js·vxe-table·vxe-ui
活跃的煤矿打工人1 小时前
【星海随笔】标准学习
学习
7ayl2 小时前
Vue3 - runtime-core的渲染器初始化流程
前端·vue.js
今天你TLE了吗2 小时前
通过RocketMQ延时消息实现优惠券等业务MySQL当中定时自动过期
java·spring boot·后端·学习·rocketmq
烤麻辣烫3 小时前
黑马程序员苍穹外卖(新手)DAY12
java·开发语言·学习·spring·intellij-idea
仙女修炼史3 小时前
目标分割学习之U_net
人工智能·深度学习·学习
Joyee6913 小时前
RN 的初版架构——触摸事件处理机制
react native·前端框架
张永清-老清3 小时前
每周读书与学习->JMeter性能测试脚本编写实战(二)- 前一个请求返回的结果作为后一个请求的入参
学习·jmeter·性能优化·性能测试·性能调优·jmeter性能测试·每周读书与学习